如何通过CSS变量和MediaQuery实现网页黑夜模式切换功能？

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

系统级深色模式开启，网页应自动跟随变暗，不用用户点击按钮——这是最省事也最符合直观操作的做 法。prefers-color-scheme 就是这样做的，它不是 JavaScript 行为，而是纯 CSS 媒体查询能力，原生、轻量、无闪烁。

关键点在于：它只响应系统设置，不记录用户手动选择；如果用户在亮色系统里硬要网页变暗，它帮不上忙。所以它适合做「默认兜底」，不能当唯一方案。

• 写法必须是 @media (prefers-color-scheme: dark) { ... }，括号和冒号缺一不可，漏空格或写成 prefers-dark 会直接失效
• 它支持 light / dark / no-preference 三种值，但实际只用前两个就够了
• Chrome 76+、Firefox 67+、Safari 12.1+ 支持，iOS 13+/Android 10+ 系统设置生效，旧版 Safari（如 iOS 12）会忽略整条规则，安全降级

为什么必须用 CSS 自定义属性（--color-bg）而不是直接写死颜色

硬编码 background: #121212 看似简单，但一旦要支持「系统自动 + 用户手动切换」双模式，立刻崩盘：你得同时维护两套完全重复的样式块，改一个颜色要同步改七八处，还容易漏。

用 CSS 变量把颜色抽出来，所有样式都引用变量，只需在根节点（:root）或特定作用域里批量重置变量值，样式层完全不动。