如何用JavaScript实现导航栏深色模式并解决跨页样式异常

原有代码问题排查 #

• JS逻辑缺失：你已经获取了navbar元素，但未执行类切换操作；且没有做深色模式状态持久化，跳转页面后状态会重置
• CSS语法错误：你写的样式规则中background color属性名拼写错误，属性名需使用连字符连接为background-color，语法错误会导致整条样式规则失效
• 跨页面失效核心原因：未做状态持久化+未做页面加载时的状态初始化，跳转到新页面时浏览器会重新渲染默认样式，不会保留上一页的切换状态

实现方案 #

1. 修正JS逻辑（推荐统一通过body类控制所有深色样式，无需单独给每个元素切换类） #

// 深色模式切换函数
function darkMode() {
  const bodyEl = document.body;
  bodyEl.classList.toggle("dark-mode");
  // 将当前深色模式状态存入localStorage，实现跨页面状态记忆
  localStorage.setItem(
    "isDarkMode",
    bodyEl.classList.contains("dark-mode") ? "1" : "0"
  );
}

// 每个页面加载完成后，自动读取存储的状态应用深色模式
document.addEventListener("DOMContentLoaded", () => {
  const isDark = localStorage.getItem("isDarkMode");
  if (isDark === "1") {
    document.body.classList.add("dark-mode");
  }
});

注意：这份JS代码需要在所有PHP页面中引入，不要只在index.php页面编写

2. 修正CSS写法 #

你之前的CSS属性拼写错误，修正后即可正常匹配：

/* 注意属性名是background-color，中间是连字符不是空格 */
body.dark-mode #navbar {
  background-color: #ddd;
  /* 其余导航栏深色样式可以继续在这里追加 */
}

3. 跨页面异常排查点 #

如果修正后仍有页面不生效，逐一检查：

• 对应页面的导航栏元素是否正确添加了id="navbar"属性，有没有id拼写错误、同页面id重复的问题
• 所有页面是否都正确引入了上述公共JS文件和公共CSS文件，没有路径引入错误
• 对应页面有没有其他优先级更高的CSS规则覆盖了导航栏背景样式，可以通过浏览器开发者工具的元素检查面板查看样式命中情况

内容的提问来源于stack exchange，提问作者script-sudo