本文介绍如何优化 JavaScript 中多个元素的暗色模式切换逻辑，避免重复调用 classList.toggle()，推荐采用将 dark-mode 类添加到根或公共父元素的方式，借助 CSS 层叠与变量实现高效、可维护的主题切换。
本文介绍如何优化 javascript 中多个元素的暗色模式切换逻辑，避免重复调用 `classlist.toggle()`，推荐采用将 `dark-mode` 类添加到根或公共父元素的方式，借助 css 层叠与变量实现高效、可维护的主题切换。
在实际开发中，为多个独立元素（如 <header>、.mobile、.navbar、.video-container）分别调用 classList.toggle('dark-mode') 不仅冗余，还增加维护成本，且当新增组件时需同步修改脚本——违背单一职责与可扩展性原则。
✅ 推荐方案：统一挂载到 <html> 或 <body> 元素
只需一次操作即可影响所有相关样式，语义清晰、性能更优：
const themeButton = document.querySelector('.theme');
themeButton.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-mode');
});对应 CSS 可利用层叠机制精准作用于各组件：
/* 默认浅色模式样式（可选） */
header, .mobile, .navbar, .video-container {
background-color: #fff;
color: #333;
}
/* 暗色模式下统一覆盖 */
.dark-mode header,
.dark-mode .mobile,
.dark-mode .navbar,
.dark-mode .video-container {
background-color: #1a1a1a;
color: #f0f0f0;
}进一步升级：结合 CSS 自定义属性（CSS Variables），实现主题色动态管理：
:root {
--bg-primary: #ffffff;
--text-primary: #333333;
}
.dark-mode {
--bg-primary: #121212;
--text-primary: #ffffff;
}
header, .mobile, .navbar, .video-container {
background-color: var(--bg-primary);
color: var(--text-primary);
}⚠️ 注意事项：
- 使用 document.documentElement（即 <html> 标签）而非 document.body，因其作为 CSS 选择器的根上下文更稳定，兼容伪类（如 :root）及全局变量作用域；
- 确保 HTML 结构中无其他逻辑依赖单个元素的 dark-mode 类——统一挂载后，应移除所有分散的 classList.toggle() 调用；
- 若需持久化主题偏好，可在切换后通过 localStorage 保存状态，并在页面加载时初始化：
// 初始化主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark-mode');
}
// 切换并保存
themeButton.addEventListener('click', () => {
document.documentElement.classList.toggle('dark-mode');
const isDark = document.documentElement.classList.contains('dark-mode');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});该方案显著提升代码简洁性与可维护性，同时为后续引入更多主题（如 sepia、high-contrast）预留扩展空间——只需新增对应 CSS 规则与 class 名，无需改动 JS 逻辑。
