我目前正在为我的网站添加一个深色主题切换开关,但似乎无法找到将数据存储到 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;
}
非常感谢。
最佳答案
去掉第二个参数,应该是这样的:
const theme = localStorage.getItem("theme");
当您从 LocalStorage 获取元素时,只需要 key
关于javascript - 将 LocalStorage 添加到暗模式切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68503839/