jQuery - 使用本地存储和偏好颜色方案切换暗模式

问题描述

我有一个 dark-mode 函数可以检测系统默认外观（light、dark、auto）并更改 CSS 以匹配所选系统theme。当用户浏览我网站上的不同子页面时，我还允许 localStorage 记住上次选择的模式。

问题是我的功能只在模式之间切换，而系统默认设置为浅色模式。

如何更新代码，以便当系统设置为暗模式或自动模式时，我可以覆盖和切换亮模式？

$(document).ready(function() {
  if (localStorage.getItem("mode") == "dark-theme") {
    $("body").addClass("dark-theme");
  } else if (localStorage.getItem("mode") == "light-theme") {
    $("body").removeClass("dark-theme");
  }
  var mq = window.matchMedia("(prefers-color-scheme: dark)");
  if (localStorage.getItem("mode") == "light-theme") {
    $("body").removeClass("dark-theme");
  } else if (mq.matches) {
    $("body").addClass("dark-theme");
  }
});

$("#theme_toggle").on("click",function() {
  if ($("body").hasClass("dark-theme")) {
    $("body").removeClass("dark-theme");
    localStorage.setItem("mode","light-theme");
  } else {
    $("body").addClass("dark-theme");
    localStorage.setItem("mode","dark-theme");
  }
});

body {
  --font-color: blue;
  --bg-color: white;
}

body.dark-theme {
  --font-color: white;
  --bg-color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    --font-color: white;
    --bg-color: black;
  }
  body.light-theme {
    --font-color: blue;
    --bg-color: white;
  }
}

body {
  color: var(--font-color);
  background: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="theme_toggle">
  <input type="checkbox" id="theme_toggle">
  Dark mode?
</label>
<h3>Title</h3>

解决方法

试试这个：

$(document).ready(function() {
  //check for localStorage,add as browser preference if missing
  if (!localStorage.getItem("mode")) {
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      localStorage.setItem("mode","dark-theme");
    } else {
      localStorage.setItem("mode","light-theme");
    }
  }

  //set interface to match localStorage
  if (localStorage.getItem("mode") == "dark-theme") {
    $("body").addClass("dark-theme");
    $("body").removeClass("light-theme");
    document.getElementById("theme_toggle").checked = true;
  } else {
    $("body").removeClass("dark-theme");
    $("body").addClass("light-theme");
    document.getElementById("theme_toggle").checked = false;
  }

  //add toggle
  $("#theme_toggle").on("click",function() {
    if ($("body").hasClass("dark-theme")) {
      $("body").removeClass("dark-theme");
      $("body").addClass("light-theme");
      localStorage.setItem("mode","light-theme");
    } else {
      $("body").addClass("dark-theme");
      $("body").removeClass("light-theme");
      localStorage.setItem("mode","dark-theme");
    }
  });
});

body {
  --font-color: blue;
  --bg-color: white;
}

body.dark-theme {
  --font-color: white;
  --bg-color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    --font-color: white;
    --bg-color: black;
  }
  body.light-theme {
    --font-color: blue;
    --bg-color: white;
  }
}

body {
  color: var(--font-color);
  background: var(--bg-color);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="theme_toggle">
  <input type="checkbox" id="theme_toggle">
  Dark mode?
</label>
<h3>Title</h3>

代码没有按预期工作的原因是第二个 if 语句覆盖了第一个的结果。

将其分解为首先检查 localStorage 然后使用它来设置用户界面（包括复选框）更简单。

如果缺少 localStorage（例如，用户是第一次访问或已清除 localStorage），则将其设置为浏览器首选项。 typical approach 是假设除黑暗之外的任何事物都意味着使用光。

如果用户禁用了脚本，则在代码中切换 .light-theme 类允许 CSS 应用浏览器首选项（例如浏览器显示默认暗模式，代码尚未运行，因此没有 .light-theme - -> 使用深色模式）。