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

Question

我有一个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>

​

Answer 1

试着这样做：

​

$(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 -->使用暗模式)。