直接用@media (prefers-color-scheme: dark)能响应系统主题，但仅此一条规则会导致白屏、闪动或颜色错乱，主因是:root变量未初始化、深色规则位置靠前被覆盖、所有var()缺fallback值、未加color-scheme声明适配原生控件，且需配合data-theme属性和matchMedia JS检测防首屏闪动。
直接用 @media (prefers-color-scheme: dark) 就能响应系统主题，但只写这一条规则，90% 的页面会在深色系统下白屏、闪动或颜色错乱——根本原因不是浏览器不支持，而是变量没初始化、顺序没摆对、兜底没写全。
为什么写了 @media (prefers-color-scheme: dark) 却没反应
最常见的是把深色样式写在默认样式之前，或者只覆盖部分变量。CSS 不会“记住”你漏掉的值，它只会按声明顺序和作用域取值。
-
:root里必须先明确定义所有主题变量的浅色默认值，例如--color-bg: #ffffff;、--color-text: #333333; - 深色媒体查询块必须放在所有默认样式之后，否则会被后续无条件规则覆盖
- 不能只写
dark分支：系统设为no-preference或旧浏览器不识别时，未定义的变量会 fallback 到浏览器默认值（比如Canvas色可能意外变白） - 嵌套写法如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }在 Safari 12.1 之前完全失效
如何避免首屏闪动和变量失效
闪动本质是渲染时机错位：浏览器先按 :root 默认值画一遍，等媒体查询生效再重绘。iOS Safari 和 Android WebView 尤其明显。
- 在
<head>里内联轻量 JS，用window.matchMedia('(prefers-color-scheme: dark)')立即检测，并给<html>加data-theme="dark"类 - 所有关键样式同时写两套：
[data-theme="dark"] .card（防闪） +@media (prefers-color-scheme: dark) .card（保语义） - 每个
var()都加 fallback，例如background: var(--bg, #ffffff);，防止变量未定义时样式崩塌 - 别依赖服务端判断主题——SSR 无法读取客户端系统偏好，直出默认主题必然闪
怎么让表单、滚动条、SVG 也自动适配
CSS 变量只管你自己写的样式，原生控件（input、select、滚动条、svg fill）默认不读变量，得靠 color-scheme 告诉浏览器“我支持双主题”。
立即学习“前端免费学习笔记（深入）”；
- 在
:root或html上加color-scheme: light dark;，Chrome 85+、Firefox 96+、Safari 15.4+ 会自动切换原生控件颜色 - 这个声明不影响自定义样式，只影响未被显式覆盖的系统级元素（比如未设
background的input） - 如果用了自定义滚动条（
::-webkit-scrollbar），就得手动在媒体查询里重写颜色，color-scheme不接管 -
color-scheme: dark单独写会强制深色，但会破坏“跟随系统”的逻辑，除非你明确要禁用用户系统设置
第三方组件库（Ant Design、MUI）为啥不跟着变
它们通常自己管理主题，靠 JS 注入 class 或改 :root 变量，和你的媒体查询规则天然冲突——要么你被它 reset，要么它被你覆盖。
- 优先查文档：MUI v5+ 支持
useMediaQuery('(prefers-color-scheme: dark)')，Ant Design 5.1+ 有algorithm: theme.darkAlgorithm - 若库不支持，用高优先级选择器强制接管，例如
[data-theme="dark"] .ant-btn { background: var(--primary-dark); } - 注意选择器层级：库的样式常带多层嵌套，你的覆盖规则至少要比它多一级，否则无效
- 避免在媒体查询里对第三方组件加
!important——这会让后续 JS 主题切换彻底失效
最容易被忽略的一点：prefers-color-scheme 是只读信号，它不触发重绘逻辑，也不保证你监听了 matchMedia 就能立刻响应系统切换——必须在监听回调里手动调用一次 handler 初始化状态，否则首屏永远按旧偏好渲染。
