light-dark()必须写color-scheme: light dark，因为它是浏览器解析该函数的硬性前提，未声明则函数被静默忽略；该函数至今未被任何主流浏览器原生支持，仅属CSS Color Module Level 5草案。
light-dark() 为什么必须写 color-scheme: light dark？
它不是“可选配置”，而是硬性前提——没这句，light-dark() 在所有浏览器里都等于没写。原因很简单：light-dark() 不是运行时函数，它依赖浏览器对当前元素“支持哪些颜色方案”的静态声明来做值选择。而这个声明，只来自 color-scheme 属性。
常见错误现象：
- 写了
color: light-dark(black, white)，但系统切暗色后文字还是黑的 - 控制台无报错、无警告，样式直接被忽略（不是 fallback 到第一个值，是彻底丢弃）
-
getComputedStyle(el).color永远返回初始值，从不随系统变化
关键点：
-
color-scheme: light dark必须写在:root或html上，写在body或其他选择器里无效 - 如果只写
color-scheme: dark，light-dark()永远取第二个参数，不管系统设的是亮还是暗 - 该声明本身不改变任何颜色，只告诉浏览器：“我声明支持双模式”，之后才让
light-dark()有据可依
light-dark() 真的能用吗？
不能。截至 2026 年 7 月，light-dark() 仍处于 CSS Color Module Level 5 草案阶段，未被 Chrome、Firefox、Safari 任何稳定版实现。你写的那行 CSS 会被静默忽略，连解析都不解析。
立即学习“前端免费学习笔记（深入）”；
容易混淆的来源：
- 某些 PostCSS 插件（如
postcss-light-dark）会把它编译成@media (prefers-color-scheme: dark)块，但这和原生 CSS 无关 - Chromium 曾在 Canary 版短暂启用过实验标志，但早已移除
- VS Code 或 Lint 工具可能误标为合法，实际运行时无效
验证方式：打开 DevTools → Elements → 找到对应元素 → 查看 Styles 面板 —— 如果 light-dark() 声明旁边没有被划掉，说明你正在用实验性构建版或插件处理后的代码；否则它根本不会出现在 computed 样式里。
替代方案怎么写才不踩坑？
真正可靠、已广泛支持的路径只有这一条：@media (prefers-color-scheme: dark) + CSS 自定义属性。但细节决定成败：
-
:root里必须先定义默认值（亮色），再在媒体查询里覆盖（暗色），漏掉默认值会导致亮色模式下变量未定义 - 媒体查询不能嵌套在其他条件里（比如
@media (width) { @media (prefers-color-scheme) { ... } }），旧版 Safari 直接跳过 -
<meta name="color-scheme" content="light dark">必须写在最前面，否则 iOS Safari 和部分 WebView 不触发原生控件变色 - 滚动条、表单边框等原生 UI 不响应自定义变量，必须靠
color-scheme+<meta>触发 UA 自动渲染，不能只靠媒体查询
最常被忽略的一点：系统语义色（如 CanvasText）比硬编码十六进制更稳，但它不支持透明度；需要半透效果时，得用 color-mix(in srgb, CanvasText 70%, transparent) 或降级 fallback。
