jQuery - 使用本地存储和偏好颜色方案切换暗模式 [英] jQuery - Toggle dark mode using local storage and prefers-color-scheme

问题描述

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

I have a dark-mode function that detects the system default appearance (light, dark, auto) and changes the CSS to match the selected system theme. I also allow localStorage to remember the last selected mode when the user browses different subpages on my site.

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

The problem is that my function only toggles between modes while the system default is set to light mode.

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

How do I update the code so that when the system is set to dark mode or auto, I am able to override and toggle light mode?

$(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 语句覆盖了第一个的结果.

The reason the code didn't work as expected was because the second if statement was overwriting the result of the first.

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

It's simpler to break this down into checking for the localStorage first and then using that to set the user interface (including the checkbox).

如果缺少 localStorage(例如，用户是第一次访问或已清除 localStorage)，则将其设置为浏览器首选项.典型方法是假设除黑暗之外的任何事物都意味着使用光.

If localStorage is missing (e.g. the user is visiting for the first time or has cleared localStorage) then set it to be the browser preference. The typical approach is to assume that anything other than dark, means use light.

在代码中切换 .light-theme 类允许 CSS 在用户禁用脚本时应用浏览器首选项(例如浏览器说默认暗模式，代码没有运行所以没有.light-theme --> 使用暗模式).

Toggling a .light-theme class in the code allows the CSS to apply the browser preference if the user has scripting disabled (e.g. browser says default dark mode, code has not run so there is no .light-theme --> use dark mode).

这篇关于jQuery - 使用本地存储和偏好颜色方案切换暗模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！