如何为暗/亮模式切换保存 cookie？ W3 学校代码答案

【问题标题】：How to save cookies for Dark/Light Mode Toggle? W3 School Code如何为暗/亮模式切换保存 cookie？ W3 学校代码
【发布时间】：2021-11-04 21:58:21
【问题描述】：

当 W3 在深色模式下放置在网页上时，它会在用户刷新时返回浅色主题。如何保持下去？

[https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp]

【问题讨论】：

您可以将用户选择的主题保存在本地存储或cookies中
欢迎来到 Stackoverflow！，不幸的是，这个问题有点太模糊了，它非常笼统地询问构成教程的内容，而不是询问具体问题。因此它不适合 stackoverflow，因为 Stackoverflow 不是教程提供者或免费的代码编写服务，我建议新用户查看 stackoverflow 的 How to ask 部分，以获取有关提出非常适合该站点并最好启用的问题的提示社区提供有用的反馈。祝你好运:)
请提供足够的代码，以便其他人更好地理解或重现问题。

标签： javascript darkmode

【解决方案1】：

您可以像这样保存用户选择的主题：

let element = document.body;
let is_darkmode_enable = element.classList.toggle("dark-mode");
document.cookie = "darkmode_enable=" + is_darkmode_enable; // Save to Cookie
localStorage.setItem("darkmode_enable", is_darkmode_enable); // Save to localStorage

并在每次用户打开页面时默认启用暗模式（保存在localStorage中）：

let darkmode_default = localStorage.getItem("darkmode_enable") || false;
let element = document.body;
element.classList.toggle("dark-mode", darkmode_default);

编辑（21 年 9 月 9 日）
我从浏览器添加了自动检测暗模式：

// This function will run automatically
(function() {
  let element = document.body;

  // Detect the OS's preferred color scheme
  // https://stackoverflow.com/a/57795495/16319071
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    element.classList.toggle("dark-mode", true);
  } else {
    let darkmode_localstorage = localStorage.getItem("darkmode") || false; // Return 'false' if 'darkmode' in localStorage returns null
    element.classList.toggle("dark-mode", darkmode_localstorage);
  }
})();

function manually_darkmode_toggle() {
  let element = document.body;
  let is_darkmode_enable = element.classList.toggle("dark-mode");
  localStorage.setItem("darkmode", is_darkmode_enable); // Save to localStorage
}

body.dark-mode {
  background: #ccc;
}

&lt;button onclick="manually_darkmode_toggle()"&gt;Click here to toggle darkmode manually&lt;/button&gt;

【讨论】：

如果用户的设备是黑暗的，这会自动变暗吗？
我刚刚将我的答案更新为“自动检测操作系统的首选配色方案”，您可以查看它。