多HTML页面间记住Dark Mode复选框勾选状态的实现方案

核心实现思路 #

通过浏览器的localStorage存储深色模式的开关状态，页面加载时自动读取并同步checkbox勾选状态与页面样式；切换模式时实时更新存储内容，实现跨页面甚至关闭浏览器重开后仍保留所选模式的效果。如果仅需跨页面切换保留（关闭不保留），可替换为sessionStorage。

完整代码实现 #

HTML（保留你的切换控件）

<!-- 深色模式切换控件 -->
<input type="checkbox" id="toggle">
<label for="toggle" class="togglebtn">
     <i id="toggle-img" class="fa-solid fa-moon"></i>
</label>

CSS（深色模式样式示例）

/* 浅色模式基础变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* 深色模式变量覆盖 */
.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #eeeeee;
}

/* 全局样式应用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* 切换按钮美化（可选） */
.togglebtn {
  cursor: pointer;
  font-size: 20px;
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.3s;
}

.togglebtn:hover {
  background-color: rgba(0,0,0,0.1);
}

.dark-mode .togglebtn:hover {
  background-color: rgba(255,255,255,0.1);
}

JavaScript（核心逻辑）

document.addEventListener('DOMContentLoaded', function() {
  const toggleCheckbox = document.getElementById('toggle');
  const toggleIcon = document.getElementById('toggle-img');
  
  // 读取本地存储的深色模式状态
  const savedDarkMode = localStorage.getItem('darkMode') === 'true';
  
  // 页面加载时同步状态
  toggleCheckbox.checked = savedDarkMode;
  if (savedDarkMode) {
    document.body.classList.add('dark-mode');
    toggleIcon.classList.replace('fa-moon', 'fa-sun');
  }
  
  // 监听模式切换事件
  toggleCheckbox.addEventListener('change', function() {
    const isDarkMode = this.checked;
    
    // 更新页面样式类
    document.body.classList.toggle('dark-mode', isDarkMode);
    // 切换图标
    toggleIcon.classList.toggle('fa-moon', !isDarkMode);
    toggleIcon.classList.toggle('fa-sun', isDarkMode);
    
    // 保存状态到本地存储
    localStorage.setItem('darkMode', isDarkMode.toString());
  });
});

关键说明 #

1. 持久化存储：使用localStorage会将状态永久保存在浏览器中，除非用户手动清除缓存；若仅需会话内保留（关闭浏览器即重置），将代码中的localStorage替换为sessionStorage即可。
2. 跨页面同步：只要每个页面都引入这段JS代码，切换页面时会自动读取存储的状态，保持模式一致。
3. 样式适配：你可以根据自己的网站样式调整:root中的变量，或者直接修改.dark-mode下的各类元素样式，核心是通过类名切换实现模式变更。

内容的提问来源于stack exchange，提问作者Hamish Mcdonald