通过为 body 元素动态添加/移除 darktheme 类，并配合 css 样式控制，可轻松实现点击按钮在深色与浅色主题间无缝循环切换，避免手动操作内联样式带来的状态管理难题。
要实现「单击切换暗黑模式、再点击恢复浅色模式」的闭环交互，核心原则是：不直接修改 element.style，而应通过 CSS 类控制主题状态。手动设置 body.style.backgroundColor 等内联样式不仅难以维护，还会覆盖外部 CSS 规则，且无法自然“撤销”——这正是原代码中“再点一次不恢复”的根本原因。
✅ 正确做法是使用 classList.toggle() 方法，它会自动判断并添加或移除指定类名，天然支持双向切换：
<!-- HTML --> <button id="themeToggle">? 切换主题</button> <h1 id="txtt">欢迎来到我的页面</h1>
/* CSS —— 默认为浅色主题（无需额外类） */
body {
background-color: #fff;
color: #333;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 暗黑主题样式 —— 仅当 body 拥有 .darktheme 类时生效 */
body.darktheme {
background-color: #111;
color: #eee;
}
body.darktheme #txtt {
color: #fff;
}// JavaScript
const toggleBtn = document.getElementById("themeToggle");
toggleBtn.addEventListener("click", () => {
document.body.classList.toggle("darktheme");
});? 关键优势说明：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- ✅ classList.toggle() 是幂等操作：无论当前是否含该类，调用后状态必然翻转；
- ✅ CSS 优先级清晰：.darktheme 类样式仅在激活时生效，退出即回归默认样式；
- ✅ 支持平滑过渡：添加 transition 可让背景与文字颜色渐变，提升用户体验；
- ✅ 易于扩展：后续可将主题偏好持久化到 localStorage，实现刷新后保持上次选择。
⚠️ 注意事项：
- 避免混合使用 style.xxx 和 classList 控制同一属性（如同时写 body.style.backgroundColor 和 .darktheme { background: ... }），否则内联样式权重更高，CSS 类将失效；
- 若页面含多个需随主题变化的元素（如按钮、卡片、链接），建议统一用 body.darktheme 作为父级作用域前缀编写 CSS，确保样式可维护性。
至此，一次点击启用暗黑模式，再次点击即刻回归清爽浅色界面——简洁、健壮、符合现代 Web 开发最佳实践。
