light-dark() 不是标准 CSS 函数，浏览器原生不支持，直接使用会报错并被忽略；应改用 @media (prefers-color-scheme) 配合 CSS 自定义属性实现深浅色模式切换。
light-dark() 函数目前不是标准 CSS 函数，浏览器原生不支持。你看到的可能是某些 CSS 预处理器（如 Less、Sass）的自定义函数，或是 PostCSS 插件（如 postcss-dark-mode）注入的语法糖，也可能是文档笔误——混淆了 color-scheme 或 @media (prefers-color-scheme) 的用法。
为什么直接写 light-dark() 会报错？
Chrome、Firefox、Safari 当前（2024 年中）均未实现名为 light-dark() 的 CSS 函数。任何尝试在原生 CSS 中这样写的代码都会被忽略，开发者工具里能看到无效声明或语法错误提示，例如：
Invalid property name: light-dark(#333, #eee)
这是最常踩的坑：把非标准语法当成了浏览器特性，结果样式完全不生效，还浪费时间调试。
替代方案：用 @media (prefers-color-scheme) 实现等效效果
真正可用、兼容性好（Chrome 87+、Firefox 96+、Safari 14+）、无需构建工具的方案是媒体查询。它语义清晰、行为确定，且能配合 CSS 自定义属性复用逻辑：
立即学习“前端免费学习笔记（深入）”；
- 定义基础变量时，先写默认值（通常为浅色），再在媒体查询内覆盖深色值
- 避免重复写选择器，把颜色、背景、边框等统一抽成
--bg、--text等变量 - 注意：变量作用域是级联的，
:root里定义 + 媒体查询里重设，就能全局生效
示例：
:root {
--text: #333;
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #eee;
--bg: #1a1a1a;
}
}
body {
color: var(--text);
background: var(--bg);
}
想“类 light-dark()”写法？得靠构建时处理
如果你坚持要类似 light-dark(#333, #eee) 这种简洁写法，必须引入构建步骤：
- Sass 用户可写一个
@function light-dark($light, $dark)，返回#{...}字符串并配合@if判断$mode变量 - PostCSS 用户推荐插件
postcss-dark-mode，它能把color: light-dark(black, white)编译成带媒体查询的双份声明 - 注意：这类写法会增加构建依赖，且最终生成的 CSS 体积略大（每处调用都展开为两套规则），对简单项目可能得不偿失
真正省代码量的关键不在函数名多短，而在是否把颜色逻辑集中管理。变量 + 媒体查询已经足够轻量；加一层抽象，反而容易掩盖真实渲染路径，出问题时更难定位。
