将 LocalStorage 添加到暗模式切换

Posted 2023-03-05

【中文标题】将 LocalStorage 添加到暗模式切换

【英文标题】：Adding LocalStorage to a Dark Mode Toggle

【发布时间】：2021-09-30 20:33:07

【问题描述】：

我目前正在为我的网站添加一个深色主题切换，但似乎无法找出将数据存储到 LocalStorage 的最佳方式。我所使用的只是一个按钮，用于切换主文档：root 上的“暗”类。实际的切换效果非常好，我只是在努力让选定的选项留在 LocalStorage 中。

这是我尝试添加的带有 LocalStorage 的代码（它确实将主题的键保存到 LocalStorage 但不保存实际的类切换）。

document.addEventListener("DOMContentLoaded", function () 
  const theme = localStorage.getItem("theme", "dark");
  const darkModeToggle = document.getElementById("modeSwitch");

  darkModeToggle.addEventListener("click", function () 
    document.documentElement.classList.toggle("dark");

    if (document.documentElement.classList.contains("dark")) 
      localStorage.setItem("theme", "dark");
    
  );
);

这里也是我的 CSS 变量供参考。

:root 
  --main-background: #f8fafb;
  --app-background: #ffffff;
  --app-background-alt: #fcfcfc;
  --app-background-hover: #f8fafb;
  --dark-background: #141923;
  --main-color: #000000;
  --secondary-color: #747987;


.dark:root 
  --main-background: #141923;
  --app-background: #171b2c;
  --app-background-alt: #1c2031;
  --app-background-hover: #1d213d;
  --dark-background: #141923;
  --main-color: #ffffff;
  --secondary-color: #747987;

非常感谢。

【参考方案1】：

您将主题存储在 localStore 中的方式很好，如果想以其他方式进行，您可以将主题存储在一个对象中。这里和例子：

localStorage.setItem("theme",JSON.stringify(theme: "dark"));

说实话，我认为如果您的应用程序不是太大，您可以保持原样。

【参考方案2】：

玩了一会儿之后，我确实想出了一个方法来成功地将主题存储到 localStorage 中。我正在做的是检查是否单击了切换并将“暗”添加到类列表中。如果是，我将其存储在 localStorage 中作为“主题”、“暗” - 如果“暗”未添加到类列表中，我将其存储在 localStorage 中作为“主题”、“亮”。

然后，在函数的顶部，我检查主题是否包含“dark” - 如果主题包含“dark”，我将类“dark”添加到 :root，如果没有，我删除它。

我不确定这是否被认为是“正确”的方式，但它确实有效！

document.addEventListener("DOMContentLoaded", function () 
  const theme = localStorage.getItem("theme", "dark");
  const darkModeToggle = document.getElementById("modeSwitch");

  if (theme === "dark") 
    document.documentElement.classList.add("dark");
   else 
    document.documentElement.classList.remove("dark");
  

  darkModeToggle.addEventListener("click", function () 
    document.documentElement.classList.toggle("dark");

    if (document.documentElement.classList.contains("dark")) 
      localStorage.setItem("theme", "dark");
     else 
      localStorage.setItem("theme", "light");
    
  );
);

【参考方案3】：

去掉第二个参数，应该是这样的：

const theme = localStorage.getItem("theme");

当您从 LocalStorage 获取项目时，只需键