通过为 `
` 元素动态添加或移除 `darktheme` 类，并配合 css 样式控制，可简洁、高效地实现点击按钮在深色与浅色主题间双向切换。要实现深色与浅色主题的真正循环切换（即首次点击变暗、再次点击恢复默认亮色），关键在于避免直接硬编码修改 style 属性——这会覆盖 CSS 规则且难以回退。推荐采用语义化类名控制 + CSS 优先级设计的方式，既符合 Web 最佳实践，又具备良好的可维护性和可扩展性。
✅ 正确做法：使用 classList.toggle() 配合 CSS 类
首先，在 CSS 中定义基础样式（浅色主题为默认）和深色主题变体：
/* 默认浅色主题（无需额外 class）*/
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.3s, color 0.3s; /* 添加平滑过渡效果 */
}
/* 深色主题：仅当 body 有 darktheme 类时生效 */
body.darktheme {
background-color: #111111;
color: #ffffff;
}
/* 同步更新其他元素（如标题、段落等） */
body.darktheme #txtt {
color: #ffffff;
}然后，HTML 中放置切换按钮（推荐用 addEventListener 而非内联 onclick，更利于解耦）：
<button id="darktheme">? 切换主题</button> <h1 id="txtt">欢迎来到我的网站</h1>
最后，JavaScript 仅负责切换类名，逻辑清晰无状态管理负担：
const myBtn = document.getElementById("darktheme");
myBtn.addEventListener("click", () => {
document.body.classList.toggle("darktheme");
});⚠️ 注意事项
- 不要混合使用 style 和 class 控制同一属性：你原代码中直接设置 body.style.backgroundColor 会生成内联样式，其优先级高于外部 CSS 类，导致 darktheme 类无法覆盖，从而“卡死”在黑色。
- 确保初始状态为浅色：确认 <body> 标签默认不带 darktheme 类，否则首次点击将误触发“关闭”操作。
- 增强体验可选：加入 transition 实现渐变效果；使用 prefers-color-scheme 检测系统偏好并自动初始化主题；将主题偏好持久化到 localStorage 实现跨会话记忆。
✅ 总结
主题切换的本质是状态映射到样式，而非手动操控 DOM 样式。用 classList.toggle() 管理布尔状态、用 CSS 类封装视觉规则，是轻量、健壮、可扩展的标准解法。一行切换、零冗余逻辑、全链路可控——这才是现代前端应有的简洁之道。
