现代浏览器用@media (prefers-color-scheme: dark)检测系统深色模式，需配合CSS变量实现主题切换，注意HTTP协议加载、系统设置生效及语法正确性。
如何用 @media 检测系统深色模式
现代浏览器支持 prefers-color-scheme 媒体查询，它能直接读取用户操作系统级的深色/浅色偏好。不是靠 JS 判断，也不依赖 localStorage 模拟，这是最轻量、最可靠的起点。
关键点：它只响应系统设置变化，不处理用户手动切换（比如页面内开关），这点必须提前明确。
-
@media (prefers-color-scheme: dark)匹配深色系统偏好 -
@media (prefers-color-scheme: light)匹配浅色系统偏好（可省略，因 CSS 默认即浅色） - 不支持该特性的浏览器会忽略整个媒体查询块，安全降级
颜色变量定义要兼顾可维护与回退
直接在每个选择器里写 color: #1a1a1a 和 color: #f9f9f9 会导致维护爆炸。必须用 CSS 自定义属性（:root 变量），但要注意回退逻辑。
错误写法：--bg: #fff; --bg: #111 —— 后者会覆盖前者，无法条件切换。
立即学习“前端免费学习笔记（深入）”；
- 基础色定义放在
:root，作为浅色默认值 - 深色规则写在
@media (prefers-color-scheme: dark)内部，并用:root重设变量 - 所有组件使用
var(--bg)，而非硬编码颜色值
:root {
--bg: #fff;
--text: #333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1a1a1a;
--text: #e6e6e6;
}
}
body {
background-color: var(--bg);
color: var(--text);
}
遇到 background-image 或 SVG 图标怎么办
纯色背景可用变量解决，但图片、渐变、SVG 填充色无法被 var() 直接控制。这时候不能硬塞媒体查询到每个元素，容易失控。
- SVG 图标建议用
fill="currentColor"，再通过父元素的color控制，这样能继承var(--text) - 背景图若需深色适配，优先考虑用
image-set()（Chrome/Firefox 支持），或拆成两套 class 手动切换 - 渐变色不要写死
linear-gradient(#fff, #eee)，改用linear-gradient(var(--bg), var(--bg-lighter))并补全对应变量
为什么 prefers-color-scheme 有时不触发
常见原因不是代码写错，而是环境限制：
- 开发时用
file://协议打开 HTML，Safari 和部分 Chrome 版本会禁用该特性（必须走 HTTP(S)） - Windows 10/11 的“深色模式”设置未开启「应用」或「默认 Windows 模式」，仅设「开始菜单」不算数
- 测试时没重启浏览器标签页——系统偏好变更后，已打开的页面不会自动重载媒体查询
- CSS 中存在语法错误（比如漏了
}），导致后续媒体查询块被整体跳过
真正在意兼容性时，别只盯着 prefers-color-scheme；手动开关 + localStorage 是必要补充，但那是另一层逻辑，和媒体查询本身无关。
