javascript - 将 LocalStorage 添加到暗模式切换

Question

我目前正在为我的网站添加一个深色主题切换开关，但似乎无法找到将数据存储到 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;
}

非常感谢。

Answer 1

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

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

当您从 LocalStorage 获取元素时，只需要 key