如何通过CSS变量实现一键切换深色模式的全局配色方案？

本文共计977个文字，预计阅读时间需要4分钟。

不必要，但这是最轻量级、最可靠的方案。硬编码+CSS或JS+动态改class都会增加维护成本和FOUC风险。root + 定义变量 @media (prefers-color-scheme: dark) 覆盖，浏览器原生支持、无需JS、可由系统/浏览器设置自动触发。

关键点在于：变量声明位置决定作用域，:root 是全局唯一锚点；媒体查询只负责“赋值”，不负责“渲染逻辑”。

• :root 中定义默认（浅色）变量值，例如 --bg: #fff
• @media (prefers-color-scheme: dark) 内重设同一组变量，例如 --bg: #1a1a1a
• 所有组件样式直接使用 background: var(--bg)，不写死颜色
• 不依赖 JS 切换时，用户手动切系统主题即可生效；需手动控制时，额外加一个 .dark-mode class 并用 JS 切换它

如何让 JS 手动切换不破坏系统偏好检测？

强行覆盖 :root 变量会屏蔽 prefers-color-scheme 的自动响应。正确做法是分层：用 class 控制“用户主动选择”，用媒体查询控制“系统默认行为”，二者互不干扰。