@media (prefers-color-scheme: dark) 本身不改变页面颜色，需配合CSS变量、正确初始化、严格覆盖及color-scheme声明才能生效；否则会出现无反应、闪动、低对比度或不可访问等问题。
@media (prefers-color-scheme: dark) 本身不会让页面变暗，它只是一条条件规则；真正起效的前提是：所有颜色/背景都通过 CSS 变量控制，且变量在 :root 中有明确的浅色默认值。
为什么写了 @media (prefers-color-scheme: dark) 却没反应
不是语法错，也不是浏览器不支持——而是 CSS 加载和变量作用域没对齐。常见现象包括：DevTools 里规则显示“已匹配”，但 body 背景仍是白色；或者深色模式下文字突然变成浅灰、看不清。
-
@media (prefers-color-scheme: dark)必须写在<style>标签或外链 CSS 文件里，不能用document.styleSheets[0].insertRule()动态插入（部分浏览器静默失败） - 如果深色规则写在
:root定义之前，会被后续无条件的:root声明覆盖（CSS 按顺序解析，媒体查询不提升优先级） -
:root里漏了某个变量的默认值，比如没定义--border-color，那在深色模式下var(--border-color)就 fallback 到浏览器默认值（常是浅灰），和深背景形成低对比 - 嵌套写法如
@media (max-width: 768px) { @media (prefers-color-scheme: dark) { ... } }在 Safari 12.1 之前完全不生效
如何安全初始化变量避免闪动和错色
闪动本质是渲染分两步：先按未生效的 :root 默认值画一遍，再等媒体查询重算。iOS Safari 和 Android WebView 尤其明显。
- 所有基础变量必须在顶层
:root显式初始化，以浅色为默认：--bg: #ffffff;、--text: #333333;、--border: #e0e0e0; -
@media (prefers-color-scheme: dark)块必须放在所有默认样式之后，并完整覆盖所有相关变量，名称严格一致，不新增、不缩写 - 每个
var()都加 fallback，例如background: var(--bg, #ffffff);——但注意 fallback 值不会随主题变，所以优先靠初始化兜底，而非依赖 fallback - 别在媒体查询里定义新变量（如
--bg-dark-only），浅色环境下读不到，var(--bg-dark-only)直接失效
为什么旧页面加了媒体查询也没变暗
旧页面通常直接写死颜色值，比如 body { background: #fff; color: #000; }。即使你后来加了变量和 @media (prefers-color-scheme: dark)，这些老规则依然优先匹配并应用，新变量根本没被用上。
立即学习“前端免费学习笔记（深入）”；
- 必须把关键选择器的颜色属性全部替换为
var(--bg)、var(--text)等，不能保留硬编码值 - 原生控件（
<input>、<select>、<textarea>）默认不响应深色模式，需配合<meta name="color-scheme" content="light dark">和color-scheme: light dark声明才能自动适配 - 系统语义色（如
Canvas、CanvasText）比#121212更稳，它们随系统高对比度/深色设置自动调整亮度，且能正确影响滚动条、表单边框等 UA 控件 - SVG 图标、图片容器背景若用硬编码色，也会在深色模式下突兀发白，需统一走变量或系统色
如何让深色模式真正兼容可访问性
很多人一上来就全局替换 background 和 color，结果文字对比度暴跌，尤其在深色下用浅灰字配深灰背——看着“暗”了，实则不符合 WCAG AA 标准。
- 优先继承系统语义色：
background-color: Canvas;、color: CanvasText;，不是替代，而是兜底 - 若必须用自定义色，请用
lab()或lch()定义（现代浏览器支持），它们能保持亮度层级，比rgb()更易控制对比度 -
color-scheme: light dark必须声明在:root或html上，否则原生控件无法触发底层深色渲染逻辑 - 不要混用
color: CanvasText和color: var(--text-primary)，且两者未对齐，会导致部分元素跳变
最易被忽略的是：变量初始化顺序、系统色关键字的使用、以及 color-scheme 声明这三者缺一不可——少一个，深色模式就可能只“看起来像”，而实际不可用或不可访问。
