如何修复暗黑模式在多HTML页面间无法保持状态的问题？

问题描述 #

这是之前问题的跟进：已经实现单页面刷新后保留暗黑/亮色模式状态，但切换到其他HTML页面时状态无法同步。比如在index.html设置为暗黑模式后，切换到other.html需要手动重新设置，希望解决多页面间状态同步的问题。

问题根源 #

1. 每个页面内的内联脚本存在重复逻辑，且有未定义变量（如checkbox）的错误
2. 页面加载时仅读取了localStorage状态，但未正确关联到CSS变量的更新
3. 代码中存在冗余逻辑（如重复添加bodyCssProps类），且该类未实际参与模式切换

解决方案 #

1. 统一HTML结构（所有页面一致，仅修改标题和跳转链接） #

移除页面内的冗余内联脚本，仅保留外部脚本引用：

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <header>
      <div class="controls">
        <p>暗黑/亮色模式</p>
        <label class="toggle-switch" for="dark-mode-toggle">
          <input type="checkbox" id="dark-mode-toggle" name="theme">
          <div class="toggle-switch-border">
            <div class="toggle-switch-dot"></div>
          </div>
        </label>
      </div>
    </header>
    <main>
      <h1>跳转到others.html</h1>
      <a href="others.html">点击跳转</a>
    </main>
  </body>
</html>

2. 保留原有CSS（移除无用类相关逻辑） #

.toggle-switch {
  display     : inline-flex;
  align-items : center;
  font-family : 'Sora', sans-serif;
  font-weight : 700;
  font-size   : .875rem;
  cursor      : pointer;
}
.toggle-switch-border {
  display             : inline-flex;
  align-items         : center;
  width               : 60px;
  height              : 36px;
  border              : 1px solid var(--primary); 
  border-radius       : 20px;
  box-sizing          : border-box;
  margin-inline-start : 8px;
}
.toggle-switch input {
  display: none;
}
.toggle-switch-dot {
  width         : 28px;
  height        : 28px;
  border-radius : 50%;
  background    : var(--primary);
  transform     : translate3d(3px, 0, 0);
  transition    : transform .1s ease-in-out;
}
.toggle-switch input:checked + * .toggle-switch-dot {
  transform : translate3d(26px, 0, 0);
}
body {
  color              : var(--primary);
  font-family        : "Work Sans", sans-serif;
  background         : var(--background);
  transition         : color 0.5s, background 0.5s;

  --dark-background  : #253a52;
  --dark-primary     : white;
  --dark-link        : #A9FE75;

  --light-background : white;
  --light-primary    : #253a52;
  --light-link       : #1348da;

  --background       : var(--light-background);
  --primary          : var(--light-primary);
  --link             : var(--light-link);
}
a {
  color : var(--link);
}
nav,
section {
  border-block-end : 1px solid var(--primary);
}
header .controls {
  display         : flex;
  justify-content : end;
  padding         : 1rem 0;
  margin-right    : 3rem;
}
a.btn {
  display         : inline-flex;
  align-items     : center;
  background      : var(--link);
  color           : var(--background);
  text-decoration : none;
  padding         : 0 1rem;
  height          : 2.5rem;
  border-radius   : 1.25rem;
  font-family     : "Montserrat", sans-serif;
  font-weight     : 700;
  font-size       : 0.875rem;
}

3. 重写脚本逻辑（合并状态更新与存储） #

/* 暗黑/亮色模式核心控制类 */
class CssPropControl {
    constructor(element) {
      this.element = element
    }
    get(varName) {
      return getComputedStyle(this.element).getPropertyValue(varName)
    }
    set(varName, val) {
      return this.element.style.setProperty(varName, val)
    }
}
  
const bodyCssProps = new CssPropControl(document.body)
const darkModeToggle = document.getElementById('dark-mode-toggle');

// 更新模式并同步到localStorage
function updateMode() {
  const mode = darkModeToggle.checked ? 'dark' : 'light'
  bodyCssProps.set('--background', bodyCssProps.get(`--${mode}-background`))
  bodyCssProps.set('--primary', bodyCssProps.get(`--${mode}-primary`))
  bodyCssProps.set('--link', bodyCssProps.get(`--${mode}-link`))
  localStorage.setItem('darkModeStatus', darkModeToggle.checked);
}

// 绑定切换事件
darkModeToggle.addEventListener('click', updateMode);

// 页面加载时恢复保存的状态
window.addEventListener('load', () => {
  const savedStatus = localStorage.getItem('darkModeStatus') === 'true';
  darkModeToggle.checked = savedStatus;
  updateMode();
});

修改说明 #

• 移除所有页面内的内联脚本，统一使用外部脚本管理逻辑，避免重复错误
• 合并模式切换与存储逻辑，在updateMode函数中完成样式更新和localStorage存储
• 页面加载时先从localStorage读取状态设置复选框，再调用updateMode确保样式同步
• 移除无用的bodyCssProps类操作，模式切换完全依赖CSS变量实现

内容的提问来源于stack exchange，提问作者Zero Hour