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