最稳妥的暗黑模式切换逻辑是操作 document.documentElement.classList：先读取系统偏好或 localStorage 初始化，再用 toggle 设置 class 并存入 localStorage；按钮绑定 onclick 而非重复 addEventListener，同时监听 prefers-color-scheme 变更并在用户未手动设置时同步。
暗黑模式切换逻辑该用 class 还是 data 属性
直接用 document.documentElement.classList.toggle('dark') 最稳妥。class 方案兼容性好、CSS 选择器直白、开发者工具里一眼能看清状态；data 属性（比如 data-theme="dark"）容易多写判断、CSS 里得用属性选择器，反而增加出错概率。
常见错误：在 <body> 上切 class，但 CSS 里写了 html.dark 选择器——结果样式不生效。务必统一作用节点，推荐始终操作 document.documentElement（即 <html> 标签）。
- 初始化时先读取系统偏好或 localStorage，再设置 class，避免页面闪白/闪黑
- 不要只靠 JS 切换，必须配 CSS 规则，例如：
html.dark { --bg: #1a1a1a; --text: #e6e6e6; } - 切换后记得存到
localStorage，否则刷新就回退
按钮点击事件里怎么避免重复绑定
如果页面加载多次（比如 SPA 路由复用组件），addEventListener 可能被反复调用，导致点一次执行多次切换。最简单解法：绑定前先用 removeEventListener 清掉旧监听，或者用 onclick 属性直接赋值（适合单按钮场景）。
示例（安全写法）：
const btn = document.getElementById('theme-toggle');<br>btn.onclick = () => {<br> document.documentElement.classList.toggle('dark');<br> localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');<br>};
立即学习“前端免费学习笔记（深入）”；
- 别在 DOMContentLoaded 里反复给同一按钮加监听，尤其用框架时注意生命周期
- 按钮本身建议加
aria-pressed属性，方便屏幕阅读器识别当前状态 - 如果按钮图标随模式变化（如太阳/月亮），用 CSS 控制显隐比 JS 换 src 更可靠
如何正确读取和同步系统暗黑偏好
用户没手动切换过时，应该尊重系统设置。用 window.matchMedia('(prefers-color-scheme: dark)') 获取初始值，但它只是快照，不会自动响应系统主题变更。需要监听 matches 变化并更新 UI。
关键点：
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');<br>mediaQuery.addEventListener('change', e => {<br> if (!localStorage.getItem('theme')) { // 用户没手动设过才同步系统<br> document.documentElement.classList.toggle('dark', e.matches);<br> }<br});
- localStorage 有值时，优先以它为准，覆盖系统偏好——这是用户主动选择的信号
- 监听器要在页面初始化时就注册，否则系统切换后页面不会响应
- 部分旧浏览器不支持
matchMedia，可 fallback 到默认 light 模式
CSS 变量和重置样式怎么写才不冲突
别直接在 .dark class 里覆盖所有颜色，而是定义一套 CSS 变量，在 :root 和 .dark 下分别赋值。这样既利于维护，也能让组件按需使用变量，而不是硬编码颜色值。
典型结构：
:root {<br> --bg: #ffffff;<br> --text: #000000;<br>}<br>html.dark {<br> --bg: #121212;<br> --text: #ffffff;<br>}<br>body { background-color: var(--bg); color: var(--text); }
- 避免在
.dark里写color: #fff !important，会破坏变量体系，后续难扩展 - 表单控件（input、select）默认样式在暗色下可能不可读，需单独重置
background和color - 图片、iframe 等外部内容不会自动变暗，必要时用
filter: brightness(0.8)微调
