@media (prefers-color-scheme: dark) 失效主因是规则位置靠前被覆盖，需后置声明、避免嵌套、配合 :root 变量顺序重定义，并通过 color-scheme 声明启用原生控件适配，ssr 需内联关键样式+同步 data-color-scheme 属性防闪动。
直接用 @media (prefers-color-scheme: dark) 就能响应系统黑夜模式，但只靠它写 CSS 很容易在真实项目里失效——不是语法错，而是加载顺序、变量作用域、回退逻辑或 SSR 渲染时机没对齐。
为什么写了 @media (prefers-color-scheme: dark) 样式却不生效
最常见原因是规则位置太靠前，被后面加载的默认样式覆盖。CSS 优先级按声明顺序计算，@media 规则本身不提升权重。
- 确保深色规则写在对应亮色规则之后（比如先定义
body { background: #fff; }，再写媒体查询里的覆盖） - 不要嵌套在其他媒体查询里，例如
@media (min-width: 768px) { @media (prefers-color-scheme: dark) { ... } }—— 旧版 Safari 12.0 及部分 WebView 完全忽略这种嵌套 - 检查 DevTools 的 Styles 面板：切换
prefers-color-scheme模拟后，目标规则是否被加删除线（表示未匹配）；若没删线但样式仍没变，大概率是 selector 优先级不够或被!important/ inline style 压制
如何用 :root 变量安全管理主题色
变量重定义必须发生在匹配的媒体查询内部，且依赖声明顺序。浏览器不会“回溯”已计算的 var() 值，只对后续渲染生效。
- 把所有基础变量写在顶层
:root，例如--bg: #fff;，保证无匹配时有 fallback - 在
@media (prefers-color-scheme: dark)内完整重写需要变更的变量，名称必须完全一致 - 避免只改部分变量（比如只改
--bg却漏掉--border），否则组件可能混用明暗色值导致对比度崩坏 - 别在媒体查询里对同一变量反复赋值（如先设
--bg: #1a1a1a，又在子选择器里再设），CSS 不支持变量“局部作用域”
SSR 页面首次加载白屏闪动怎么压住
服务端无法读取客户端系统偏好，Next.js/Nuxt 等框架首屏必然按默认主题（通常是亮色）输出 HTML，等 JS 加载并执行 window.matchMedia 后才补上深色类 —— 这个间隙就是闪动来源。
- 在 HTML 的
标签上同步注入data-color-scheme属性：服务端用 User-Agent 或客户端 JS 注入（需配合 hydration 逻辑） - 让关键 CSS（尤其是
:root变量）通过<style></style>标签内联，避免外链 CSS 加载延迟导致样式错乱 - 如果用 CSS-in-JS（如 Emotion），确认其版本支持
prefers-color-scheme透传；旧版会剥离该媒体查询，导致服务端和客户端样式不一致 - 别依赖 JS 初始化时查
matchMedia再加 class —— 那样首屏永远是亮色，用户系统设了暗色也得等 JS 执行完才变
表单控件和原生元素为啥还是亮色
prefers-color-scheme 媒体查询本身不影响 <input>、<select></select>、滚动条、焦点环等原生控件的颜色，它们由浏览器自主决定，除非你显式声明兼容意图。
- 必须在
:root或html上加color-scheme: light dark;，这是告诉浏览器“我支持双模式”，它才会自动适配控件 - 或者在
中加<meta name="color-scheme" content="light dark">，效果等价 - 即便加了
color-scheme，某些控件（如<input type="range">轨道）仍需手动设background和color，否则暗色下不可见 -
<img>和 SVG 图标不会自动反转颜色，得靠filter: invert(1)或提供两套资源，不能指望媒体查询“智能翻转”
真正麻烦的从来不是“怎么写 media query”，而是变量何时生效、服务端怎么吐出合理初始态、以及原生控件是否被遗忘——这些点一旦漏掉一个，用户看到的就是闪动、糊字、或一个半黑半白的输入框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
