用classList.toggle实现暗黑模式切换，核心是给html元素添加或移除dark类，并通过CSS变量定义亮/暗两套样式，再结合localStorage持久化用户偏好。
用 classList.toggle 实现暗黑模式切换，核心是给 <html> 或 <body> 添加/移除一个标识暗黑主题的类（比如 dark），再配合 CSS 变量或样式规则控制颜色。开关本身只需一个按钮，点击时触发切换即可。
1. HTML 结构：一个干净的切换按钮
不需要复杂标签，一个带 ID 的 <button> 就够了：
2. JavaScript：用 toggle 简洁切换类
监听按钮点击，对 document.documentElement（即 <html> 元素）调用 classList.toggle('dark')：
toggleBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
});
这行 toggle 会自动判断：
- 如果当前没有 dark 类，就添加它；
- 如果已有，就移除它。
3. CSS：定义亮色与暗色两套样式
推荐用 CSS 自定义变量统一管理颜色，在 :root 和 .dark 下分别设置：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
:root {--bg-color: #fff;
--text-color: #333;
}
.dark {
--bg-color: #1e1e1e;
--text-color: #e0e0e0;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
4. 进阶建议：保存用户偏好
避免每次刷新都回到默认，可结合 localStorage 记住上次选择：
- 页面加载时读取
localStorage，有值就提前加 class - 切换后立即存入新状态
if (localStorage.getItem('theme') === 'dark') {
document.documentElement.classList.add('dark');
}
// 切换时同步保存
toggleBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
const isDark = document.documentElement.classList.contains('dark');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});
不复杂但容易忽略：确保样式作用范围覆盖所有关键元素，优先用 :root + .dark 组合控制变量，比逐个写 .dark h1、.dark p 更简洁可维护。
