通过为 body 元素动态添加/移除 css 类来控制主题样式，避免直接操作内联样式，从而实现点击按钮即可在深色与浅色主题间无缝循环切换。
要实现深色与浅色主题的双向切换（即“再点击恢复”），核心在于状态管理的可逆性——不能仅单向设置样式，而应借助 CSS 类的增删机制，让浏览器自动处理“进入深色”和“退出深色”两种状态。
✅ 推荐做法：使用 classList.toggle()
该方法会智能判断当前元素是否已存在指定类名：若存在则移除，若不存在则添加，天然支持循环切换逻辑。
? HTML 结构（简洁示例）：
<button id="themeToggle">? 切换主题</button> <h1 id="txtt">欢迎来到我的页面</h1>
? CSS 样式（定义深色主题规则，其余默认即为浅色）：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
/* 默认（浅色）主题：无需额外声明，继承浏览器原生或自定义基础样式 */
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.3s, color 0.3s; /* 添加平滑过渡效果 */
}
/* 深色主题：仅覆盖需变更的属性 */
body.darktheme {
background-color: #111111;
color: #ffffff;
}
body.darktheme #txtt {
color: #ffffff;
}? JavaScript 逻辑（解耦、可维护、无重复代码）：
const toggleBtn = document.getElementById("themeToggle");
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("darktheme");
});? 关键优势说明：
- ✅ 无需手动记录状态（如用布尔变量 isDarkMode），toggle() 自动处理；
- ✅ 样式集中管控：所有主题相关视觉规则写在 CSS 中，JS 仅负责行为触发，符合关注点分离原则；
- ✅ 天然支持多元素联动：只需在 .darktheme 下扩展选择器（如 .darktheme header, .darktheme .card），即可批量更新全局样式；
- ✅ 兼容性好：classList.toggle() 支持所有现代浏览器及 IE10+；
- ⚠️ 注意：避免混合使用 style.backgroundColor = ... 等内联样式，否则会覆盖 CSS 类定义，导致切换失效。
? 进阶提示（可选）：
如需持久化用户偏好，可在切换时存入 localStorage，并在页面加载时读取并初始化主题：
// 页面加载时应用上次选择
if (localStorage.getItem("theme") === "dark") {
document.body.classList.add("darktheme");
}
// 切换时同步存储
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("darktheme");
const isDark = document.body.classList.contains("darktheme");
localStorage.setItem("theme", isDark ? "dark" : "light");
});至此，你已拥有一套轻量、健壮、可扩展的主题切换方案——一次点击启用深色，再次点击回归明亮，真正实现优雅的循环切换。
