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 class 允许 CSS 在用户禁用脚本时应用浏览器首选项（例如浏览器说默认暗模式，代码没有运行所以没有 .light-theme --> 使用深色模式）。

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

jQuery - Toggle dark mode using local storage and prefers-color-scheme

javascript

darkmode