css如何引入暗色模式样式_使用media prefers-color-scheme_技术教程

prefers-color-scheme 是 CSS 媒体查询，用于响应系统暗色偏好：@media (prefers-color-scheme: dark) { / 暗色样式 / }，支持 Chrome 76+ 等现代浏览器，值为 light/dark/no-preference，需配合 data-theme 属性避免与手动切换冲突。

如何用 `prefers-color-scheme` 检测系统暗色模式

浏览器原生支持通过 @media (prefers-color-scheme: dark) 捕获用户系统级暗色偏好，无需 JS、不依赖 localStorage，且在页面首次渲染时即生效。它不是“切换主题”的开关，而是「响应式查询」——就像查屏幕宽度一样查配色倾向。

常见错误是把它当 JS 控制器用，比如监听变化后手动加 class；其实纯 CSS 就能覆盖绝大多数基础适配需求。

只在支持该媒体查询的浏览器中生效（Chrome 76+、Firefox 67+、Safari 12.1+、Edge 79+）
值只有 light、dark、no-preference 三种，no-preference 极少见，通常可忽略
它查的是操作系统或浏览器设置，不是用户在网页里点的“切换按钮”

写法上必须用 `@media` 块包裹规则，不能直接写属性

很多人误以为可以这样写：body { color: prefers-color-scheme(dark, #333, #ddd); } —— 这是无效语法。CSS 不支持函数式颜色回退，必须靠媒体查询分块声明。

正确结构是先写默认（亮色）样式，再用 @media 覆盖暗色部分：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
  img.icon {
    filter: brightness(0.8);
  }
}

注意：不要在暗色块里重复声明未变化的属性（比如 font-family），避免冗余；优先覆盖颜色、背景、边框、阴影等易受亮度影响的属性。

和手动主题切换共存时，怎么避免冲突

如果页面同时提供「用户点击切换」功能（比如一个 toggle 按钮），prefers-color-scheme 会和 class 控制逻辑打架。典型表现是：系统设为暗色，但用户点了“切回亮色”，页面却还是暗的。

解决思路是用更具体的 CSS 选择器权重压制媒体查询：

给或添加 data-theme="light" / data-theme="dark"
让 JS 切换这个 data 属性，而非仅加 class
在 CSS 中，用 [data-theme="dark"] 规则覆盖 @media (prefers-color-scheme: dark)

因为属性选择器权重（0,1,0,0）高于媒体查询（0,0,0,0），所以能确保用户主动选择优先生效。

图片、SVG 和表单控件的暗色适配容易被忽略

纯色背景的、在暗色下常变成黑底黑字；SVG 图标若用内联 fill="#333" 也不会自动变；PNG 图标可能在深色背景上不可见。

建议做法：

对表单元素统一重置：用 @media (prefers-color-scheme: dark) 设置 background: #1e1e1e、color: #f0f0f0、border-color: #333
SVG 尽量用 fill="currentColor"，让它随 color 变化
关键图标准备两套（或用 + ），否则至少加一层 filter: invert(1) hue-rotate(180deg) 应急（慎用，会影响彩图）