用@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 在外层声明默认值，再在媒体查询中“重新设置”它：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-color: #ffffff;
--text-color: #333333;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1e1e1e;
--text-color: #e6e6e6;
}
}
怎么让深色模式过渡更自然（避免闪屏和突变）
页面加载瞬间可能先显示浅色再切深色，尤其服务端渲染或首屏快的场景。根本原因是 CSS 变量未在 HTML 解析早期就位。
- 确保变量定义放在
最上方的<style></style>中，不要延迟加载 - 避免用 JS 动态注入主题 CSS，否则必然闪
- 对背景/文字等大面积颜色，可加
transition: background-color 0.2s, color 0.2s缓动（但仅限非关键元素，body上加 transition 可能引发重排） - 若需强制首屏即深色（如用户明确点击过“深色开关”），得靠 localStorage + 内联 style，此时
@media就退为备选方案
兼容性兜底：IE 和老 Android 怎么办
@media (prefers-color-scheme) 在 IE 完全不支持，Android Webview 4.4–6.0 也无效。这时候不能只依赖它。
- 给
body加一个默认 class，比如theme-light - 用 JS 检测
window.matchMedia是否可用，再判断是否支持 dark 模式 - 不支持时，保持默认浅色；支持时，用 JS 添加
theme-darkclass 并移除旧 class，CSS 用.theme-dark .card { background: var(--bg-color); }控制 - 注意：别用 JS 改写全部 CSS 变量值——性能差且易错，class 切换 + 变量定义分离才是正解
真正麻烦的不是切换逻辑，而是变量命名和层级控制——比如 --border-color-subtle 和 --border-color-strong 这类语义化变量一旦定下来，改起来牵一发而动全身。定名时多花两分钟，后面省两小时调试。
