最常见原因是:root未定义默认变量导致浅色模式下var(--bg)回退为unset，页面白屏/黑屏；必须满足三个前提：显式声明浅色默认值、dark媒体查询置于默认样式之后、不嵌套在其他媒体查询内。
为什么只写 @media (prefers-color-scheme: dark) 没反应
最常见原因是：:root 里压根没定义任何默认变量，导致浅色系统下 var(--bg) 回退为 unset，body 背景透明或继承黑色，页面白屏/黑屏。这不是浏览器 bug，是 CSS 变量未声明的必然行为。
必须满足三个前提才可能生效：
-
:root中显式声明所有主题变量的浅色默认值（如--bg: #fff、--text: #333） -
@media (prefers-color-scheme: dark)块必须放在所有默认样式之后（CSS 层叠顺序决定一切） - 不能嵌套在其他媒体查询里（例如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }在旧版 Safari 中完全失效）
如何用 :root + @media 正确组织主题变量
变量不是“全局常量”，它的作用域和声明时机直接影响渲染结果。错误写法是只在 dark 媒体查询里赋值；正确做法是先铺默认，再覆盖。
推荐结构（顺序不能错）：
:root {
--color-bg: #ffffff;
--color-text: #333333;
--color-border: #e0e0e0;
--color-primary: #007bff;
}
<p>@media (prefers-color-scheme: light) {
:root {
--color-bg: #ffffff;
--color-text: #333333;
--color-border: #e0e0e0;
}
}</p><p>@media (prefers-color-scheme: dark) {
:root {
--color-bg: #121212;
--color-text: #e0e0e0;
--color-border: #333333;
--color-primary: #4caf50;
}
}</p>
这样写有三个好处：明确兜底 no-preference 场景、避免 Safari 13.3 以下忽略重定义、方便后续加用户手动切换逻辑。
原生控件（<input>、滚动条、<svg></svg>）为啥还是亮色
CSS 变量对 <input>、<select></select>、::-webkit-scrollbar、<svg></svg> 的 fill/stroke 完全无效——它们不读取自定义属性，也不自动响应 prefers-color-scheme。
必须额外处理：
- 在
:root或html上加color-scheme: light dark;（Chrome 85+、Firefox 96+、Safari 13.4+ 支持），通知浏览器“我支持双主题”，让原生控件自动适配 - 对
::-webkit-scrollbar单独写 dark 分支：@media (prefers-color-scheme: dark) { ::-webkit-scrollbar-thumb { background: #555; } } - SVG 内联
fill或用currentcolor，再通过父元素color间接控制
页面加载时闪一下再变暗，怎么缓解 FOUC
纯 CSS 方案无法彻底消灭闪屏（FOUC），但可以大幅压缩可见时间。核心思路是：在 HTML 渲染前，用最小 JS 预判系统偏好并打上 class 锚点。
在 里内联这段脚本：
<script>
document.documentElement.classList.toggle(
'dark',
window.matchMedia('(prefers-color-scheme: dark)').matches
);
</script>
然后在 CSS 中写：
.dark body { background: var(--color-bg); color: var(--color-text); }
/* 同时保留 media query，作为 fallback */
@media (prefers-color-scheme: dark) {
:root { /* 变量覆盖 */ }
}
注意：别给 html 加 style="transition: none !important;" 这种 hack，现代浏览器下反而容易引发渲染异常；真正关键的是确保 JS 在 CSS 解析前执行，且 class 应用早于首帧绘制。
复杂点在于：系统“自动切换”（如 macOS 日出日落）存在延迟，matchMedia 初始值可能不准；而用户手动切主题后，又得靠 localStorage 和 class 优先级去接管，prefers-color-scheme 本身永远只是只读信号，不能被覆盖或禁用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
