如何用CSS实现深色模式并兼容旧页面样式？

旧页面加了媒体查询也没变暗，是因为硬编码颜色值（如#fff）优先于变量且不在媒体查询内，导致深色模式失效；需将关键选择器的颜色属性替换为var()并确保变量有默认值。

@media (prefers-color-scheme: dark) 不会自动覆盖旧样式，必须显式重写所有用到的颜色、背景、边框等规则——否则旧 CSS 里硬编码的 #ffffff 或 black 仍会生效，深色模式形同虚设。

为什么旧页面加了媒体查询也没变暗

旧页面通常直接写死颜色值，比如 body { background: #fff; color: #000; }。即使你后来在 :root 里加了变量和 @media (prefers-color-scheme: dark)，这些老规则依然优先匹配并应用，新变量根本没被用上。

1. 浏览器按 CSS 声明顺序和选择器权重决定最终样式，body { background: #fff; } 比 body { background: var(--bg); } 更早、更具体，就赢了
2. 旧规则里没有 var()，自然不响应变量变更；也不在媒体查询里，所以不会随系统主题切换
3. 如果旧样式来自第三方库（如 Bootstrap 4）、内联 style 或 !important，覆盖难度更高

如何让新变量“接管”旧选择器

核心不是改变量，而是把旧规则“转译”成变量驱动——重点是找到关键样式节点，最小化侵入式修改。

1. 先锁定高频使用的旧选择器：如 body、h1、.btn、.card、input 等，检查 DevTools 的 Styles 面板，看哪些声明带硬编码颜色
2. 对每个目标选择器，用 var() 替换其 color、background、border-color、box-shadow 值，例如：body { color: var(--text-primary); background: var(--bg-primary); }
3. 不要全量重写，只改那些实际影响明暗观感的属性；像 font-family、margin 这类无需动
4. 若旧样式来自外部 CSS 文件且无法修改，可在其后追加一层“变量桥接”样式表，用更高权重覆盖，例如：body[data-theme="auto"] { color: var(--text-primary) !important; }

兼容性兜底与渐进增强

旧页面可能跑在 Safari 12–14、Chrome 75 以下等不支持 prefers-color-scheme 的环境。不能只依赖媒体查询，得有 fallback 路径。

1. 确保所有 var(--xxx) 都有默认值：:root { --text-primary: #333; }，避免不支持时回退成透明或浏览器默认色
2. 对关键组件（如表单控件），同时用 color-scheme: light dark + <meta name="color-scheme" content="light dark">，否则 <input> 在 iOS Safari 下仍白底黑字
3. 如果旧页面已用 class 切换（如 body.dark），可保留该逻辑，把 @media 规则合并进对应 class 内，避免冲突：body.dark { --bg-primary: #121212; }
4. 滚动条、::-webkit-scrollbar、<progress> 轨道等 UA 控件必须单独写伪元素规则，且同样要用变量或系统语义色（如 Canvas）

最容易被忽略的是：所有旧 CSS 里出现过颜色值的地方，只要它会影响明暗感知，就必须出现在变量体系中——漏掉一个 --border-color，就可能让卡片边框在深色下消失；漏掉一个 --icon-fill，SVG 图标就卡在黑色无法反色。