暗黑模式怎么实现？CSSprefers-color-scheme详解

想让网页自动适配用户的系统主题？只需一行纯CSS代码——`@media (prefers-color-scheme: dark)`，就能精准响应用户在操作系统中设置的暗色或浅色偏好，无需JavaScript、不依赖本地存储，兼容主流现代浏览器（Chrome 87+、Firefox 96+、Safari 12.1+），且支持动态重绘，是实现轻量、高效、原生级暗黑模式的首选方案。

怎么用 prefers-color-scheme 检测系统主题

CSS 里直接用 @media (prefers-color-scheme: dark) 就能捕获用户系统设的暗色偏好。它不是 JavaScript 判断，也不依赖 localStorage，纯 CSS 媒体查询，浏览器原生支持——Chrome 87+、Firefox 96+、Safari 12.1+ 都行，旧版 Safari（<12.1）会直接忽略这条规则，安全降级。

• 触发条件只看系统设置，不是浏览器设置或网页开关
• prefers-color-scheme 只有三个值：light、dark、no-preference（极少出现，可忽略）
• 不要写成 @media (prefers-color-scheme = dark)，等号是错的，必须用冒号
• 它不响应运行时切换（比如 macOS 切主题后刷新页面才生效），但现代浏览器基本都支持动态重绘

@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #e0e0e0;
  }
}

为什么不能只靠 prefers-color-scheme 实现完整暗黑模式

它只告诉“系统倾向”，不代表用户当前就要暗色；很多人开着深色系统，但只想在某个网站用亮色。硬绑死会导致体验反噬——比如夜间用手机刷知乎，系统是暗色，但你刚点开一篇代码教程，背景一黑，pre 里的浅灰文字直接糊成一片。

• 用户主动开关（如页面右上角 ☀️/?）优先级应高于系统偏好
• 必须把用户选择存到 localStorage，否则刷新就丢
• prefers-color-scheme 最适合做「首次访问默认值」，不是最终决策者
• 如果用了 CSS 自定义属性（--bg-color），别只在媒体查询里改，得配合 JS 注入 class 或切换属性值

class 切换比 media query 更可控

直接在 上加 class="theme-dark" 或 class="theme-light"，然后所有样式基于这个 class 写，比层层嵌套 @media 更易维护、更易测试、也更容易和 JS 互动。

• 把暗黑逻辑收口到一个 class，避免重复写 @media (prefers-color-scheme: dark) 十几次
• JS 改主题只需 document.documentElement.classList.toggle('theme-dark')
• 要兼容老浏览器？加个 .theme-dark body { ... } 就行，不用管媒体查询
• 注意：不要用 !important 强盖，容易和组件库冲突；用更具体的 selector，比如 .theme-dark .card

容易被忽略的细节：表单控件和图片对比度

prefers-color-scheme 不会自动翻转 <input type="range"> 的轨道颜色，也不会让 变成深色版本。这些得手动处理，否则暗色下 slider 看不见、图标发灰、SVG 图标漏色。

• 表单元素（input、select、button）默认样式在暗色下常不可读，必须显式设 background 和 color
• 如果是黑底白标 SVG，暗色下就消失，得准备两套或用 filter: invert(1)（慎用，会影响语义）
• box-shadow 在暗色下要用透明度更低的黑，比如 box-shadow: 0 2px 4px rgba(0,0,0,0.2)，而不是 rgba(0,0,0,0.8)
• 暗色模式不是简单“变黑”，重点是保证文本与背景的对比度 ≥ 4.5:1（WCAG AA 标准），这点常被跳过

事情说清了就结束。

到这里，我们也就讲完了《暗黑模式怎么实现？CSSprefers-color-scheme详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！