本文介绍如何通过检测用户系统偏好并维护内部状态，实现仅用一个按钮即可在亮色与暗色模式间双向切换，避免因初始模式不匹配导致按钮失效的问题。
本文介绍如何通过检测用户系统偏好并维护内部状态，实现仅用一个按钮即可在亮色与暗色模式间双向切换，避免因初始模式不匹配导致按钮失效的问题。
要让单个按钮真正“智能”地切换主题（无论页面初始加载为亮色还是暗色模式），关键在于：主动感知当前系统偏好，并在 JavaScript 中维护一个准确的模式状态变量，而非依赖 classList.toggle() 的“盲切”行为。
classList.toggle() 本身没有问题，但它只检查元素当前是否含有该 class，而无法反映用户真实意图或系统实际偏好——尤其当页面通过 CSS @media (prefers-color-scheme: dark) 自动启用暗色样式（但未添加 .dark-mode class）时，toggle() 会误判状态，导致点击无效。
✅ 正确做法是：
-
首次加载时主动读取系统偏好
使用window.matchMedia('(prefers-color-scheme: dark)').matches获取用户系统设置，并据此初始化页面状态（如添加 class、设置布尔值）； -
用单一状态变量（如
isDarkMode）统一管理模式逻辑； - 切换函数基于该状态决定增删 class，而非依赖 DOM 现状。
以下是完整、健壮的实现示例：
<!-- 推荐使用语义化按钮文本 --> <button id="theme-toggle" aria-label="切换深色/浅色模式">? 切换主题</button>
/* 基础样式（浅色模式为默认） */
body {
background: #fff;
color: #333;
transition: background 0.3s, color 0.3s;
}
.dark-mode {
background: #1a1a1a;
color: #e0e0e0;
}// 1. 初始化：读取系统偏好并同步 DOM
const isSystemDark = window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
let isDarkMode = isSystemDark;
// 应用初始主题
if (isDarkMode) {
document.body.classList.add('dark-mode');
}
// 2. 定义切换函数
function toggleColorScheme() {
isDarkMode = !isDarkMode; // 清晰的布尔翻转
if (isDarkMode) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.remove('dark-mode');
}
}
// 3. 绑定事件（推荐用 addEventListener 替代内联 onclick）
document.getElementById('theme-toggle').addEventListener('click', toggleColorScheme);
// ✅ 可选增强：监听系统偏好变化（如用户中途切换系统主题）
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
// 注意：此处不自动切换页面主题，而是可选地提示用户或同步状态
// 若需自动同步，可调用 toggleColorScheme()，但通常建议由用户显式触发更友好
});⚠️ 注意事项：
- 避免使用
onclick="toggleColorScheme()"内联写法，它不利于维护和测试；优先采用addEventListener； -
isDarkMode ^= 1虽简洁，但对布尔值而言!isDarkMode更清晰、可读性更强； - 若需持久化用户选择（覆盖系统偏好），应配合
localStorage存储并优先读取本地设置； - 添加
transitionCSS 属性可使背景/文字颜色切换更平滑； - 为无障碍考虑，为按钮添加
aria-label并在切换时更新其文本（例如显示“☀️ 切换主题”）可进一步提升体验。
总结：一个真正可靠的暗色模式切换按钮，核心不在“点击动作”，而在“状态感知 + 主动控制”。通过初始化读取、状态驱动、显式 class 控制三步，即可确保按钮在任何初始条件下都精准响应用户意图。
