实现暗黑/亮色模式及复选框状态跨页面持久化的技术求助

核心改进思路 #

• 用CSS类封装主题样式，替代直接操作元素style，提升可维护性
• 完善Cookie读写逻辑，确保全站范围内可读取状态
• 修正页面加载事件，确保状态及时恢复
• 同步复选框与主题状态，切换/加载时保持一致

完整实现代码 #

1. CSS样式（推荐放在单独的样式文件中）

/* 亮色模式默认样式 */
body {
  background-color: rgb(230, 230, 230);
  color: rgb(0, 0, 0);
  transition: background-color 0.3s, color 0.3s; /* 添加过渡动画，提升体验 */
}

/* 暗黑模式样式 */
body.dark-mode {
  background-color: rgb(18, 18, 18);
  color: rgb(230, 230, 230);
}

2. HTML结构（示例）

<button id="light-dark-btn">切换主题</button>
<label>
  <input type="checkbox" id="theme-checkbox"> 开启暗黑模式
</label>

3. JavaScript逻辑

const modeButton = document.getElementById('light-dark-btn');
const themeCheckbox = document.getElementById('theme-checkbox');
const body = document.body;

// 读取Cookie的工具函数
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 设置Cookie，指定path确保全站生效
function setCookie(name, value, days = 365) {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = `expires=${date.toUTCString()}`;
  document.cookie = `${name}=${value}; ${expires}; path=/`;
}

// 主题切换核心函数
function toggleDarkMode() {
  const isDark = body.classList.contains('dark-mode');
  // 切换主题类
  body.classList.toggle('dark-mode');
  // 同步复选框状态
  themeCheckbox.checked = !isDark;
  // 保存状态到Cookie
  setCookie('darkMode', !isDark);
}

// 页面加载时恢复状态
document.addEventListener('DOMContentLoaded', () => {
  const savedMode = getCookie('darkMode');
  // 优先使用Cookie记录，无记录则适配系统深色偏好
  const useDarkMode = savedMode === 'true' || 
    (!savedMode && window.matchMedia('(prefers-color-scheme: dark)').matches);

  if (useDarkMode) {
    body.classList.add('dark-mode');
    themeCheckbox.checked = true;
  } else {
    body.classList.remove('dark-mode');
    themeCheckbox.checked = false;
  }
});

// 绑定按钮点击事件
modeButton.addEventListener('click', toggleDarkMode);

// 绑定复选框变更事件，手动修改时同步主题
themeCheckbox.addEventListener('change', () => {
  const isChecked = themeCheckbox.checked;
  body.classList.toggle('dark-mode', isChecked);
  setCookie('darkMode', isChecked);
});

关键改进点说明 #

1. CSS类管理主题：将主题样式集中在.dark-mode类中，切换时只需操作类名，避免零散的style修改，后续扩展其他元素样式更方便。
2. Cookie全局生效：设置Cookie时添加path=/，确保所有页面都能读取到主题状态，解决跨页面状态丢失问题。
3. 正确的加载时机：使用DOMContentLoaded事件，在DOM结构加载完成后立即恢复状态，避免页面闪烁。
4. 复选框状态同步：无论是通过按钮切换还是手动勾选复选框，都会同步更新主题和Cookie状态，确保跨页面切换时复选框状态一致。
5. 系统偏好适配：当没有Cookie记录时，自动适配用户系统的深色模式设置，提升初始体验。

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