@media (prefers-color-scheme: dark) 失效主因是变量未在 :root 先声明默认值、深色规则顺序靠前或被嵌套、漏定义变量导致回退失效，且必须加 color-scheme: light dark 并显式重置原生控件样式。
能，但只靠 @media (prefers-color-scheme: dark) 写几行样式大概率会失效或闪屏——核心问题不在“会不会”，而在变量定义顺序、兜底缺失和原生控件适配被忽略。
为什么写了 @media (prefers-color-scheme: dark) 却没反应
不是媒体查询没触发，而是 CSS 层叠规则在执行：它不自动提升优先级，只靠声明顺序覆盖。
- 深色规则写在浅色样式之前 → 后面无条件的
:root定义直接覆盖掉 - 嵌套写法：
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }→ iOS 13.3 及更早 Safari 完全不识别 -
:root里漏定义某个变量（比如--btn-bg），深色块里再赋值也无效 —— 变量作用域从首次声明那一刻才存在 - CSS 是动态插入的（
document.createElement('link')）→ 部分浏览器不会重新评估媒体查询匹配状态
:root 变量必须这样初始化才不翻车
所有主题变量必须在 :root 中明确定义一次，默认值以浅色为基准；深色块里只改值，不新增变量名。
- 错例：
:root { --bg: #fff; } @media (prefers-color-scheme: dark) { :root { --bg: #121212; } }→ iOS 13.3 以下 Safari 可能忽略后者 - 正例：先写完整
:root默认块，再紧跟@media覆盖，变量名带语义，如--color-bg-surface - 所有使用处必须加 fallback：
background: var(--bg-surface, #fff);，否则变量未定义时样式崩塌 - 别把变量定义在组件选择器里（如
.card { --bg: #fff; }）→ 媒体查询无法覆盖
表单、SVG、滚动条这些“隐形元素”怎么一起切
它们不读取 CSS 变量，也不响应 color 或 background 的间接变化，必须显式重置。
立即学习“前端免费学习笔记（深入）”；
- 加
color-scheme: light dark;到:root或html→ 通知浏览器“我支持双主题”，让原生控件自动适配 -
input、select、textarea默认样式受系统影响大，建议显式重置border/background/color - SVG 的
fill和stroke必须写成fill: var(--icon-primary);，不能靠currentColor或继承 - 滚动条需单独声明：
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
为什么首屏会白一下再变黑（闪屏）
根本原因是浏览器解析 CSSOM 时，prefers-color-scheme 的值尚未就绪，页面先按默认（通常是亮色）渲染一次，等媒体查询生效后再重绘。
- iOS Safari 和部分 Android WebView 尤其明显
- 旧版 Safari（12.0）、微信内置浏览器、某些 Electron 内核根本不识别该媒体特性
- 用户系统设浅色但偏爱网页深色，或系统没配偏好（
no-preference）→ 媒体查询不触发 - 纯 CSS 方案无法覆盖这些场景，必须搭配 JS 初始化 +
data-theme属性选择器做协同控制
最常被忽略的是：深色模式不是简单反色，而是整套色彩语义体系的重构。漏掉 color-scheme 声明、跳过表单重置、依赖未定义变量 fallback，任何一个都足以让深色下文字糊成一片或按钮彻底消失。
