light-dark() 函数目前仅在 safari 17.4+ 和 chrome 125+（需启用实验标志）中部分支持，firefox 及旧版 chrome 完全不识别，生产环境应优先使用 @media (prefers-color-scheme) 媒体查询以确保兼容性。
light-dark() 函数在哪些浏览器中能用
light-dark() 是 CSS 颜色函数，用于根据用户的系统配色方案（prefers-color-scheme）自动返回亮色或暗色值。但它**目前仅在 Safari 17.4+ 和 Chrome 125+（需开启实验性功能）中可用**，Firefox 和旧版 Chrome 完全不识别——直接使用会导致该声明被整条忽略。
常见错误现象：color: light-dark(black, white); 在 Firefox 中失效，文字保持默认色；开发者工具里该行显示为“invalid property value”。
- Chrome 中需手动启用
#enable-css-light-dark实验标志（地址栏输入chrome://flags/#enable-css-light-dark） - Safari 17.4+ 默认支持，但仅限于
color、background-color、border-color等颜色类属性，不能用于font-size或margin - 不能嵌套在
calc()或其他函数中，例如color: calc(light-dark(0, 100%) * 1px)会报错
替代 light-dark() 的可靠写法：@media + prefers-color-scheme
生产环境应优先使用标准媒体查询，兼容性覆盖所有现代浏览器（包括 Edge 16+、Firefox 67+）：
button {
background-color: #f0f0f0;
color: #333;
}
<p>@media (prefers-color-scheme: dark) {
button {
background-color: #333;
color: #f0f0f0;
}
}</p>
这种写法更可控，也支持任意属性切换（不只是颜色），比如调整 box-shadow 模糊半径或 filter 值。
- 注意顺序：深色规则必须放在浅色规则之后，否则会被覆盖
- 可结合自定义属性提升可维护性：
:root { --bg-primary: #fff; --text-primary: #000; }，再在@media中重设 - 避免在
@media外重复写相同选择器，否则容易遗漏某一套样式
light-dark() 与自定义属性组合使用的陷阱
有人尝试把 light-dark() 赋给 CSS 变量，再在其他地方引用，例如：
:root {
--text-color: light-dark(black, white);
}
p { color: var(--text-color); }
这在 Safari 中看似可行，但存在两个关键问题：
- 变量本身不会响应系统主题变化——一旦页面加载完成，
--text-color就固定为初始值，切换系统模式后不会更新 - 若父元素设置了
color，子元素用var(--text-color)会继承父级计算后的颜色，而非重新走light-dark()判断 - 更稳妥的做法是：直接在需要的地方调用
light-dark()，不要经由变量中转
何时可以放心用 light-dark()？
当前阶段，只建议在以下场景有限试用：
- 面向 Safari 用户为主的内部工具或演示页（已知用户用最新 Safari）
- 作为渐进增强：先写好
@media规则，再在支持的浏览器中用light-dark()覆盖个别属性，不依赖它兜底 - 仅用于简单颜色切换，且确认目标属性已被列入 Safari 支持列表（见 MDN 兼容表）
真正棘手的是过渡动画和动态主题切换——light-dark() 不触发重绘，也不支持 transition，这些仍得靠 JS 监听 prefers-color-scheme 变化并切换 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
