light-dark() 不是通用变色函数，需满足 color-scheme 声明、仅用于颜色属性、参数为纯色值三条件，且存在浏览器兼容与构建工具剔除风险；媒体查询仍是主力，变量定义顺序和完整性至关重要；系统语义色更稳定但需配合 meta 标签和正确用法。
没有通用的 CSS 变色函数能自动适配深色模式——light-dark() 是少数已落地的候选，但它不是“开箱即用”的魔法函数，而是一套有严格前提和边界条件的语法糖。
为什么 light-dark() 不能直接替代媒体查询
它只在 Chrome 124+、Firefox 125+、Safari 17.4+ 中可用，且必须满足三个硬性条件同时成立：
- :root 或 html 上声明了 color-scheme: light dark（不能写在局部选择器里）
- 使用位置仅限颜色属性（color、background-color、border-color 等），不能用于 font-size 或 padding
- 参数只能是纯色值：light-dark(#333, #fff) ✅，但 light-dark(var(--text), #fff) ❌ 会失效
更实际的问题是：构建工具可能提前剔除它。比如旧版 PostCSS 或未升级的 Vite 插件会把它当非法语法过滤掉，最终 CSS 文件里根本不存在该函数。
@media (prefers-color-scheme: dark) 仍是主力，但变量定义顺序不能错
所有主题变量必须先在 :root 中初始化浅色默认值，再在媒体查询中覆盖深色值：
:root {
--bg: #fff;
--text: #000;
--border: #e0e0e0;
}
<p>@media (prefers-color-scheme: dark) {
:root {
--bg: #121212;
--text: #e0e0e0;
--border: #333;
}
}</p>
常见错误包括：
- 把深色变量写在浅色变量之前，导致浅色模式下被覆盖
- 在媒体查询里定义新变量名（如 --bg-dark），结果浅色模式引用时 var(--bg-dark) 为 unset
- 漏掉某条变量（比如只改了 --bg 却忘了 --border），对应边框就卡在系统默认色上
系统语义色比函数更稳，但要用对地方
不用函数、也不硬编码，直接用浏览器原生语义色更可靠：
-
background-color: Canvas和color: CanvasText会随系统高对比度/深色/浅色设置自动微调亮度与饱和度 - 它们不支持透明度，所以
CanvasAlpha无效；需要半透时得用color-mix(in srgb, CanvasText 70%, transparent)（Chrome 111+）或 fallback 到变量 -
Canvas类颜色只影响背景、文字、边框等基础层，对 SVG 图标、滚动条 thumb、表单控件等仍需额外处理
例如滚动条颜色必须单独写伪元素规则：::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb, Canvas); }，否则即使用了 Canvas，thumb 仍可能是浅色。
最容易被忽略的兼容点：meta 标签和表单控件
光写 CSS 不足以让 <input>、<select></select> 自动变深色。必须在 中加：
<meta name="color-scheme" content="light dark">
否则这些原生控件始终显示浅色外观，哪怕你用了 light-dark() 或媒体查询。这个 <meta> 标签是触发 UA 控件自动适配的开关，color-scheme CSS 属性无法替代它。
另外，内联 SVG 图标不会响应任何 CSS 主题切换逻辑：fill: currentColor 或 fill: var(--icon-fill) 才行；filter: invert(1) 看似简单，但在高对比度模式下会让图标不可读，且破坏语义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
