如何用JavaScript为HTML页面实现简易的深色/浅色模式切换？

别再逐个修改元素样式了，用CSS变量+根元素类切换的方式，既能简化代码又能提升效率，步骤如下：

1. 定义CSS全局变量 #

在CSS里用:root定义浅色主题的默认颜色变量，再创建一个深色主题类覆盖这些变量，所有页面元素直接引用变量即可：

/* 浅色主题默认变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --card-bg: #f5f5f5;
}

/* 深色主题变量 */
.dark-theme {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --card-bg: #2d2d2d;
}

/* 全局样式绑定变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* 平滑过渡效果 */
}

.card {
  background-color: var(--card-bg);
  padding: 1rem;
  border-radius: 8px;
}

2. 添加切换按钮 #

在HTML里放一个触发主题切换的按钮：

<button id="themeToggle">切换主题</button>
<!-- 示例元素 -->
<div class="card">这是一个卡片内容</div>

3. 编写JavaScript切换逻辑 #

只需要给根元素切换dark-theme类，同时用本地存储记住用户的选择，还能适配系统的深色模式偏好：

const themeToggle = document.getElementById('themeToggle');
const root = document.documentElement;

// 初始化主题：优先读取本地存储，其次适配系统偏好
if (localStorage.getItem('theme') === 'dark' || 
    (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  root.classList.add('dark-theme');
}

// 点击切换主题
themeToggle.addEventListener('click', () => {
  const isDarkMode = root.classList.toggle('dark-theme');
  localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
});

为什么这个方法更优 #

• 无需遍历DOM元素修改样式，仅切换一个类，性能开销极低
• 颜色变量统一管理，新增页面元素直接引用变量即可，维护成本低
• 支持记忆用户选择，还能自动适配系统的深色/浅色模式设置

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