<p>prefers-color-scheme 是 CSS 媒体查询，用于响应系统暗色偏好：@media (prefers-color-scheme: dark) { / 暗色样式 / }，支持 Chrome 76+ 等现代浏览器，值为 light/dark/no-preference，需配合 data-theme 属性避免与手动切换冲突。</p>
如何用 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 选择器权重压制媒体查询：
- 给
<html>或<body>添加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 和表单控件的暗色适配容易被忽略
纯色背景的 <input>、<button> 在暗色下常变成黑底黑字；SVG 图标若用内联 fill="#333" 也不会自动变；PNG 图标可能在深色背景上不可见。
建议做法：
- 对表单元素统一重置：用
@media (prefers-color-scheme: dark)设置background: #1e1e1e、color: #f0f0f0、border-color: #333 - SVG 尽量用
fill="currentColor"，让它随color变化 - 关键图标准备两套（或用
<picture>+<source media>），否则至少加一层filter: invert(1) hue-rotate(180deg)应急（慎用，会影响彩图）
暗色模式不是简单翻转黑白，重点是保证对比度达标（文本与背景至少 4.5:1），这点比“看起来像暗色”更重要。
