用@media (prefers-color-scheme: dark)配合css变量实现深色模式：在:root定义默认值，媒体查询中重设；变量须声明在:root外层，不可嵌套于@media内；首屏闪屏需将变量置于head内联style并加transition；不支持浏览器用class兜底。
如何用 @media (prefers-color-scheme) 自动适配深色模式
系统级深色偏好能被 CSS 原生捕获，不用 JS 监听或手动切换 class。关键就是 @media (prefers-color-scheme: dark) 这条媒体查询，它在用户系统设为深色时自动生效。
但直接在每个选择器里重复写颜色值会失控，所以必须配合 CSS 变量——把颜色抽成 --bg-color、--text-color 这类自定义属性，再在媒体查询里批量重定义。
- 只在
:root里定义默认（浅色）变量值 - 用
@media (prefers-color-scheme: dark)覆盖同一组变量 - 所有组件样式统一用
var(--bg-color)，不硬编码具体颜色 - 注意：该媒体查询不支持动态响应系统切换（旧版 Safari 需刷新），现代浏览器已基本无感
为什么不能把变量定义在媒体查询内部再 :root 外引用
CSS 变量作用域是“声明处生效”，@media 块内定义的变量只在该块内有效。如果写成：
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1e1e1e;
}
}
这是无效的——:root 选择器在媒体查询里只是个普通选择器，不会提升到根作用域。正确写法是让 :root 在外层声明默认值，再在媒体查询中“重新设置”它：
