时间戳

首页 > 解决方案 > 跨多个 html 页面设置 darkMode

javascript - 跨多个 html 页面设置 darkMode

问题描述

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

A 对于我的 html，body 没有任何类。body 标签的类是通过 javascript 添加的

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

标签： javascriptlocal-storagetoggledarkmode

解决方案

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

推荐阅读