跨多个 html 页面设置暗模式

Question

我有两个 html 页面（index.htm 和 details.htm）。每当我在 details.html 中启用暗模式时，它都会保留在 index.html 中而没有任何问题，但是当我从 index.html 页面转到详细信息页面时，暗模式会被禁用。

我正在使用本地存储来启用和禁用暗模式。

我的 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 仅包含几个自定义变量，两个主题的名称相同。

我的 html 正文没有任何类。 body标签的类是通过javascript添加的

有没有办法将darkMode设置为对所有页面启用，除非用户每次访问页面时都自己更改它？

Answer 1

我认为你的 JS 没有问题，你可能没有将类名“darkMode”放在 html 的 body 标记中。有一件事可以肯定的是，问题不在于脚本，而在于 css 或 html。再次查看这两个的代码。