如何为暗模式和亮模式切换保存 cookie？答案

【问题标题】：How can I save cookies for dark mode and light mode toggling?如何为暗模式和亮模式切换保存 cookie？
【发布时间】：2022-01-10 08:28:29
【问题描述】：

我不太明白如何将暗/亮模式的选择保存为 cookie。

这是我正在尝试的网页： https://schooloffish.info/index.html

尝试了用于 cookie 的 w3schools 代码，但我无法让它工作。任何帮助表示赞赏。

【问题讨论】：

标签： javascript cookies local-storage darkmode lightmode

【解决方案1】：

您可以使用 localStorage 和 css 变量来存储和切换主题。例如：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      /* css variables */
      .dark {
         --bg: black;
         --fg: white;
      }

      .white {
         --bg: white;
         --fg: black;
      }

      body {
         /* use the variable */
         background-color: var(--bg);
         color: var(--fg);
      }

      button {
         /* use the variable */
         background-color: var(--bg);
         color: var(--fg);
         border-radius: 5px;
         border-style: dashed;
      }
   </style>
</head>

<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad at ipsum placeat maiores, fugiat neque sit, et
      consequatur, fuga libero magni porro saepe distinctio quibusdam sapiente praesentium earum assumenda id!</p>
   <button id='switch' onclick="switchTheme()">switch theme</button>
   <script>
      // setting theme when contents are loaded
      window.addEventListener('load', function () {
         var theme = localStorage.getItem('theme');
         // when first load, choose an initial theme
         if (theme === null || theme === undefined) {
            theme = 'light';
            localStorage.setItem('theme', theme);
         }
         // set theme
         var html = document.querySelector("html");
         // apply the variable
         html.classList.add(theme);
      })

      function switchTheme() {
         var theme = localStorage.getItem('theme');
         var html = document.querySelector('html');
         // choose new theme
         if (theme === 'dark') {
            new_theme = 'light';
         } else {
            new_theme = 'dark';
         }
         // remove previous class
         html.classList.remove(theme);
         // add new class
         html.classList.add(new_theme);
         // store theme
         localStorage.setItem('theme', new_theme);
      }
   </script>

</body>

</html>

【讨论】：

感谢@SodaCris。我从未见过 CSS 中使用过 --bg 或 --fg 。在您的脚本中，当您使用浅色和深色时，您是指 CSS 文件中的深色和白色吗？ “无法在 'DOMTokenList' 上执行 'remove'：提供的令牌不能为空。”为html.classList.remove(theme);。我相信它无法运行。
您可能忘记了addEventListener 部分.. 我添加了一些 cmets 以使其更易于理解。

【解决方案2】：

使用document.cookie:

// inside your event listener on the dark mode toggle:
document.cookie = "darkMode=true";

然后您可以使用类似 getCookie() 的股票辅助函数来检索值：

let darkMode = getCookie("darkMode");

【讨论】：