如何用多页面HTML实现全局深色/浅色模式（附代码）

你的代码已经走对了方向——用CSS变量+localStorage持久化主题，但有一处逻辑错误会导致切换异常，同时需要确保配置能覆盖全站页面，下面是修正后的完整方案：

一、核心逻辑修复（当前JS的问题） #

你当前的切换逻辑里，判断的是页面加载时获取的theme变量（固定值），而不是当前页面实际的主题状态。比如第一次切换后，theme还是初始值，会导致localStorage存储错误。修正后应该基于body的类来判断当前主题。

二、全站生效的关键配置 #

1. 将style.css和修正后的script.js引入到网站所有页面：
   • CSS文件放在每个页面的<head>中
   • JS文件放在每个页面的</body>标签前（确保DOM加载完成）
2. 把主题切换按钮（id="toggle"的按钮）放到网站的公共组件里（比如导航栏），这样所有页面都能访问切换功能

三、修正后的完整代码 #

1. 修正后的JavaScript（script.js） #

const toggle = document.getElementById("toggle");
// 页面加载时读取localStorage的主题偏好并应用
const savedTheme = window.localStorage.getItem("theme");
if (savedTheme === "dark") {
  document.body.classList.add("dark");
} else if (!savedTheme) {
  // 可选：如果没有存储的偏好，跟随系统主题
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.classList.add("dark");
  }
}

// 主题切换逻辑
toggle.addEventListener("click", () => {
  const isDark = document.body.classList.toggle("dark");
  // 根据当前状态更新localStorage
  window.localStorage.setItem("theme", isDark ? "dark" : "light");
});

// 刷新按钮逻辑（可选保留）
const refresh = document.getElementById("refresh");
refresh.addEventListener("click", () => {
  window.location.reload();
});

2. 优化后的CSS（style.css） #

推荐把CSS变量定义在:root（根元素）上，作用域更广，比body更适合全局主题：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全局CSS变量定义 */
:root {
  /* 浅色模式变量 */
  --text-white: #ffffff;
  --text-dark: #142136;
  --bg-grey-light: #f5f5f5;
  --bg-white: #ffffff;
  --bg-blue-dark: #142136;
  --bg-indigo: #6366f1;
}

/* 深色模式变量覆盖 */
.dark {
  --text-white: #e6e6e6;
  --text-dark: #ffffff;
  --bg-grey-light: #142136;
  --bg-white: #22395d;
  --bg-blue-dark: #142136;
  --bg-indigo: #7577e1;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.7;
  background-color: var(--bg-grey-light);
  /* 可选：添加主题切换过渡动画 */
  transition: background-color 0.3s, color 0.3s;
}

.container {
  max-width: 600px;
  margin: 40px auto;
  display: flex;
  padding: 20px;
  flex-direction: column;
}
.text-wrapper {
  width: 100%;
  padding: 20px;
  background-color: var(--bg-white);
  margin-bottom: 40px;
  border-radius: 10px;
  transition: background-color 0.3s;
}
.paragraph {
  font-size: 16px;
  color: var(--text-dark);
  transition: color 0.3s;
}
.heading {
  font-size: 40px;
  letter-spacing: 1px;
  font-weight: 900;
  margin-bottom: 40px;
  color: var(--text-dark);
  transition: color 0.3s;
}
.buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.button {
  width: 200px;
  padding: 5px;
  height: 40px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  background-color: var(--bg-indigo);
  color: var(--text-white);
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  transition: background-color 0.3s;
}

3. 页面HTML示例（所有页面都需要引入CSS和JS） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet" />
  <!-- 引入全局CSS -->
  <link rel="stylesheet" href="style.css" />
  <title>深色/浅色模式示例</title>
</head>
<body>
  <div class="container">
    <h1 class="heading">
      基于HTML、CSS和JS的全站深色/浅色主题切换
    </h1>
    <div class="buttons">
      <!-- 主题切换按钮（建议放到公共导航中） -->
      <button id="toggle" class="button">切换主题</button>
      <button id="refresh" class="button">刷新页面</button>
    </div>
    <div class="text-wrapper">
      <p class="paragraph">
        这里是页面内容示例，所有使用CSS变量的元素都会跟随主题自动切换样式。
      </p>
    </div>
  </div>
  <!-- 引入全局JS -->
  <script src="script.js"></script>
</body>
</html>

四、额外优化建议 #

1. 防闪烁处理：如果页面加载时先显示浅色再切换深色会有闪烁，可以在<head>中添加一段内联JS，提前判断主题并给html或body加类：

<head>
  <!-- 其他head内容 -->
  <script>
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme === "dark" || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add("dark");
    }
  </script>
</head>

注意这时候CSS里的.dark要改成html.dark来对应。

2. 主题状态同步：如果网站有多个标签页，监听storage事件可以同步其他标签页的主题变化：

window.addEventListener('storage', (e) => {
  if (e.key === 'theme') {
    if (e.newValue === 'dark') {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }
});

内容的提问来源于stack exchange，提问作者Michael Borne