原生 CSS 不支持 light-dark() 函数，它仅存在于 Sass/Less 等预处理器或实验插件中；唯一稳定方案是 prefers-color-scheme 媒体查询配合 CSS 自定义属性实现主题切换。
light-dark() 函数只在 CSS 预处理器或实验性环境里存在，原生 CSS 不支持
直接在标准 CSS 文件里写 light-dark(white, black) 会完全无效——浏览器解析时直接丢弃该声明，且不报错。这个函数目前不是 CSS 标准的一部分，也未被 Chrome、Firefox 或 Safari 实现为原生函数。你看到的示例大多来自 Sass、Less 的自定义函数，或是某些框架（如 Tailwind 的实验插件）的封装。
真正可用的原生方案是 prefers-color-scheme 媒体查询
这是当前唯一稳定、广泛支持（Chrome 76+、Firefox 67+、Safari 12.1+）的方案，通过 CSS @media 切换样式：
button {
background-color: white;
color: black;
}
@media (prefers-color-scheme: dark) {
button {
background-color: black;
color: white;
}
}
- 必须成对写两套规则，不能“内联”切换单个属性值
-
prefers-color-scheme值只有light、dark、no-preference（极少触发），不支持手动强制覆盖 - 若用户系统设为自动（日出/日落切换），浏览器会实时响应，无需 JS 干预
想模拟 light-dark() 行为？用 CSS 自定义属性 + 媒体查询组合
把主题色抽成变量，在媒体查询中重定义，就能实现类似“函数调用”的复用效果：
:root {
--bg-primary: white;
--text-primary: black;
}
@media (prefers-color-scheme: dark) {
:root {
--bg-primary: black;
--text-primary: white;
}
}
.card {
background-color: var(--bg-primary);
color: var(--text-primary);
}
- 变量名要语义化，避免写
--color-light/--color-dark这类耦合模式的命名 - 注意：CSS 变量不支持在
@media外“条件赋值”，必须显式在媒体查询块内重设 - 若需 JS 动态切换（比如加手动开关），得用
document.documentElement.style.setProperty()覆盖变量，同时禁用媒体查询逻辑，否则会冲突
警惕第三方工具链里的 “light-dark()” 伪函数
某些 PostCSS 插件（如 postcss-dark-theme-class）或构建脚本会把 light-dark(light, dark) 编译成媒体查询代码。但这类转换有明显限制：
立即学习“前端免费学习笔记（深入）”；
- 无法处理变量嵌套（例如
light-dark(var(--a), var(--b))通常不支持） - 编译后 CSS 体积增大，每个调用都生成完整
@media块，重复率高 - 调试困难：开发者工具里看不到原始
light-dark()，只看到生成的媒体查询，容易误判来源 - 若构建失败或插件未启用，
light-dark()会被原样输出，导致样式丢失
真要简化写法，不如封装一个 CSS 类工具集，或者用 JS 在初始化时读取 matchMedia('(prefers-color-scheme: dark)') 后设置 class 到 <html> 上——比依赖编译时函数更可控。
