light-dark() 不是标准 css 函数，浏览器不支持，会静默忽略；当前唯一标准化的深色模式适配方式是 @media (prefers-color-scheme: dark) 配合自定义属性或系统语义色（如 canvas、text）。
light-dark() 函数目前并不存在于任何正式发布的 CSS 规范中，也不是主流浏览器支持的原生函数。你看到的可能是误传、实验性提案（如早期 @property 或 color-scheme 相关讨论），或是某些 CSS 预处理器（如 Sass）的自定义函数名。
为什么在 Chrome/Firefox/Safari 里写 background-color: light-dark(white, black); 会无效？
因为这不是标准语法。浏览器解析时会直接丢弃该声明，控制台也不会报错——它只是被忽略。实际生效的是 fallback 值（如果有），或者继承值。这种“静默失败”最容易让人误以为配置没生效，转而去查 prefers-color-scheme 媒体查询是否写错。
- 当前唯一标准化的深色模式适配方式仍是
@media (prefers-color-scheme: dark) - CSS 自定义属性（
--bg: white;）配合媒体查询是最可靠、兼容性最好的组合 - 部分构建工具（如 PostCSS 插件）可能提供
light-dark()的编译转换，但那是构建时替换，不是运行时 CSS 功能
想少写媒体查询？用 color-scheme + 系统级语义颜色更省事
如果你的目标是减少重复声明，重点不该放在虚构函数上，而是利用浏览器已支持的系统感知能力：
-
color-scheme: light dark;告诉浏览器该元素可适配两种主题，触发表单控件、滚动条等原生组件自动切换 - 直接使用
background-color: Canvas;、color: Text;这类系统语义色（[CSS Color Adjust Level 1](https://drafts.csswg.org/css-color-adjust/)），无需手动指定黑白值 - 这些关键字在支持的浏览器（Chrome 89+、Safari 15.4+、Firefox 96+）中真实可用，且无需 JS 或媒体查询
真要封装 light-dark() 行为？用 CSS 自定义属性 + 媒体查询最稳妥
你可以自己模拟这个行为，但必须基于标准语法：
html {
--bg: #fff;
--text: #000;
}
@media (prefers-color-scheme: dark) {
html {
--bg: #000;
--text: #fff;
}
}
.card {
background-color: var(--bg);
color: var(--text);
}
这样既保持可维护性，又不依赖未实现特性。注意两点：
- 不要把
var(--bg)写成light-dark(var(--light), var(--dark))—— 后者纯属无效代码 - 如果项目用了 CSS-in-JS 或主题切换组件，确保 JS 切换 class 时也同步更新这些变量，否则媒体查询会被绕过
真正容易被忽略的是：深色模式不只是换两个颜色。对比度、焦点轮廓、图片亮度、阴影强度都需要独立调整。light-dark() 这种“一键两值”思路，在复杂 UI 中很快就会失灵。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
