light-dark() 不是标准 css 函数，chrome 125+/safari 17.4+ 仅有限支持且需手动启用或受限属性，firefox 及旧版浏览器静默忽略；赋值给 css 变量会失效，因计算结果不响应主题切换；唯一可靠方案是 @media (prefers-color-scheme)。
light-dark() 在浏览器里根本不能直接用
它不是标准 CSS 函数，Chrome 125+ 和 Safari 17.4+ 里看似能写，但前提是：Chrome 必须手动打开 chrome://flags/#enable-css-light-dark，Safari 只支持 color、background-color 等有限属性，且不支持嵌套在 calc() 或自定义属性里。Firefox 和所有旧版浏览器直接忽略整条声明——连警告都没有，样式就静默失效。
为什么把 light-dark() 赋给 CSS 变量会失效
常见错误写法：:root { --text: light-dark(black, white); }，再用 color: var(--text)。这在 Safari 17.4+ 里可能“看起来”有效，但有两个硬伤：
- 变量值只在页面加载时计算一次，系统主题切换后不会更新
- 子元素继承的是已计算出的固定颜色，不是重新走
light-dark()判断 - 如果父元素有
color声明，子元素var(--text)会继承那个值，而不是触发主题重算
真正可靠的替代方案只有 @media (prefers-color-scheme)
这是唯一被 Chrome 76+、Firefox 67+、Safari 12.1+ 全面支持的原生方案。关键点不是“怎么写”，而是“怎么写才不出错”：
- 必须同时写
@media (prefers-color-scheme: light)和@media (prefers-color-scheme: dark)，不能只写 dark 分支——否则无偏好或 light 模式下变量未定义，页面可能全白或全黑 -
color-scheme: light dark要加在:root上，它不只是为light-dark()服务，还影响表单控件、滚动条等系统级渲染 - 深色规则必须放在浅色规则之后，否则会被覆盖；建议把所有主题变量集中定义在
:root里，用媒体查询重设
构建工具里用 light-dark() 的前提是你真配了插件
像 postcss-light-dark 这类插件，本质是把 color: light-dark(black, white) 编译成两段 CSS：color: black; + @media (prefers-color-scheme: dark) { color: white; }。它不改变浏览器能力，只是省体力活。
- 没接入插件时，所有
light-dark()写法都是死代码，构建产物里照样存在，但浏览器直接跳过 - 插件生成的 CSS 体积会翻倍，组件库大时得留意打包后体积增长
- SSR 场景首次 HTML 输出无法感知客户端偏好，仍需 JS 补切或加
<noscript></noscript>回退
别被“一行搞定”的宣传误导——真正的自动适配背后，要么是明确的媒体查询，要么是 JS 监听 matchMedia('(prefers-color-scheme)') 并动态更新 class 或 CSS 变量。light-dark() 不是魔法，是语法糖，糖化失败时，你得知道底料是什么。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
