本文介绍一种健壮的暗色模式切换方案：通过监听系统偏好并维护内部状态，使单个按钮既能从亮色切入暗色，也能从暗色切回亮色，避免因初始状态不一致导致功能失效。
本文介绍一种健壮的暗色模式切换方案：通过监听系统偏好并维护内部状态，使单个按钮既能从亮色切入暗色，也能从暗色切回亮色，避免因初始状态不一致导致功能失效。
要实现一个真正“智能”的暗色模式切换按钮，关键在于解耦用户操作与 DOM 当前状态——不能仅依赖 classList.toggle() 这种无状态切换，而应主动感知系统偏好，并维护一个明确的当前主题状态。
首先，在页面加载时立即检测用户系统级颜色偏好：
let isDarkMode = window.matchMedia
? window.matchMedia('(prefers-color-scheme: dark)').matches
: false;该逻辑确保：无论页面初始由 CSS @media (prefers-color-scheme: dark) 自动启用暗色样式，还是用户手动触发，JavaScript 均能准确获知“当前应呈现的主题”。
接着，为 <button></button> 绑定语义更清晰的事件处理器：
<button onclick="toggleColorScheme()">Toggle color scheme</button>
对应的 JavaScript 函数需做到三点：
✅ 更新内部状态（isDarkMode）
✅ 同步更新 DOM 类名（精准添加/移除，非盲目 toggle）
✅ 支持首次调用即生效（无论初始是亮/暗）
const toggleColorScheme = () => {
isDarkMode = !isDarkMode; // 清晰、可读的布尔取反
if (isDarkMode) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
};⚠️ 注意事项：
- 避免使用
element.classList.toggle("dark-mode")—— 它仅根据当前 DOM 是否含该类来翻转，但无法反映真实主题意图（例如：CSS 已通过@media暗色规则生效，但 classList 中未显式添加.dark-mode，此时 toggle 会错误移除样式）。- 若需持久化用户选择（覆盖系统偏好），可在
toggleColorScheme中写入localStorage，并在初始化时优先读取；本文聚焦“与系统同步+手动干预”场景，故暂不引入存储逻辑。- 推荐将
isDarkMode封装为模块变量或使用useState（React）等状态管理机制，避免全局污染。
最后，为保障初始样式与 JS 状态一致，建议在 CSS 中同时支持两种入口：
/* 基础样式（亮色） */
body { background: #fff; color: #333; }
/* 暗色样式：既响应 class，也响应媒体查询 */
@media (prefers-color-scheme: dark) {
body:not(.dark-mode) {
background: #121212;
color: #eee;
}
}
.dark-mode {
background: #121212;
color: #eee;
}这样，即使 JS 加载延迟或禁用，用户仍能获得合理的默认体验；而 JS 启用后，即可无缝接管控制权，实现精准、可预测的主题切换。
