跨多个html页面设置darkMode
跨多个html页面设置darkMode
提问于 2021-08-02 05:23:02
我有两个html页面(index.htm和details.htm)。每当我在details.html中启用黑暗模式时，它都会保留在index.html中，没有任何问题，但当我从index.html页面转到详细信息页面时，darkMode会被禁用。
我使用本地存储来启用和禁用darkMode。
我的javascript代码：
let darkMode = localStorage.getItem("darkMode");
const toggleBtn = document.querySelectorAll("#mode");
document.body.classList.add('lightMode');
function enableDarkMode() {
localStorage.setItem('darkMode', 'enabled');
document.body.classList.add('darkMode');
document.body.classList.remove('lightMode');
}
function disableDarkMode() {
localStorage.setItem('darkMode', null)
document.body.classList.remove('darkMode');
document.body.classList.add('lightMode');
}
toggleBtn.forEach(btn => {
if(darkMode === 'enabled') {
enableDarkMode();
}
btn.addEventListener("click", () => {
darkMode = localStorage.getItem('darkMode')
if (darkMode !== 'enabled') {
enableDarkMode()
} else {
disableDarkMode();
}
});
})css代码：
.lightMode {
--background-color: white;
--textColor: black;
--borderColor: black;
--shadowColor: grey;
--card: white;
--span: rgba(0, 0, 0, 0.459);
--footer: rgb(231, 231, 231);
--element: rgba(0, 0, 0, 0.03);
--tagColor: rgb(66, 66, 66);
}
.darkMode {
--background-color: rgb(25, 25, 25);
--textColor: rgba(255, 255, 255, 0.76);
--borderColor: white;
--shadowColor: black;
--card: rgb(39, 39, 39);
--span: rgba(255, 255, 255, 0.459);
--footer: rgb(56, 56, 56);
--element: rgba(49, 49, 49, 0.493);
--tagColor: rgb(255, 255, 255);
}我的css只包含几个自定义变量，两个主题具有相同的名称。
A对于我的html，body没有任何类。body标记的类是通过javascript添加的
有没有办法将darkMode设置为启用所有页面，除非用户每次访问页面时都自己更改它？
回答 1
Stack Overflow用户
发布于 2021-08-02 06:05:33
有一件事是肯定的，问题不是脚本，而是css或html。再看看这两个的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68616697
复制相关文章
相似问题
腾讯云开发者
