使用暗模式时本地存储不工作

Question

我正在尝试将暗模式应用到我的网站。我正在使用下面给出的代码来这样做。

!(function () {
var t,
e = document.getElementById("darkSwitch");
if (e) {
(t =
null !== localStorage.getItem("darkSwitch") &&
"dark" === localStorage.getItem("darkSwitch")),
(e.checked = t)
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme"),
e.addEventListener("change", function (t) {
e.checked
? (document.body.setAttribute("data-theme", "dark"),
localStorage.setItem("darkSwitch", "dark"))
: (document.body.setAttribute("data-theme", "light"),
localStorage.setItem("darkSwitch", "dark"));
});
}
})();

你可以在这里查看http://anayaadventure.com/

一切都很好，但问题是现在假设我把黑暗模式关闭，我刷新页面，然后页面再次加载在黑暗模式。为什么会发生这种情况，我该如何解决它

感谢您事先提供的帮助。

Answer 1

你好像从来没有把localstorage设置回" light ";在toggle-event

中

e.checked
? (document.body.setAttribute("data-theme", "dark"),
localStorage.setItem("darkSwitch", "dark")) //set to dark
: (document.body.setAttribute("data-theme", "light"),
localStorage.setItem("darkSwitch", "dark")); //set item to "light" instead of "dark" ?

如果您手动将本地存储值编辑为"light"回到光照模式所以我想你应该把最后一行改成localStorage.setItem("darkSwitch"， "light"));

除此之外，我喜欢这个网站的布局和设计!