light-dark() 函数在Chrome 124+、Firefox 125+、Safari 17.4+中已原生支持，但需满足color-scheme: light dark声明于:root或html，且仅适用于纯色值颜色属性，不支持变量动态更新或非颜色属性。
light-dark() 函数到底支不支持？先看浏览器真实状态
截至 2026 年 5 月，light-dark() 在 Chrome 124+、Firefox 125+、Safari 17.4+ 中已原生支持，但它不是“写了就生效”的通用函数——它只在满足 color-scheme: light dark 前提时才起作用。没声明这个，light-dark(#333, #fff) 直接被解析为 unset，不报错、不警告、也不回退到第一个值。
更关键的是：它仍被部分构建工具（如未升级的 PostCSS 链路）当作非法语法忽略。如果你用的是旧版 Vite、Next.js 或自定义 Webpack 配置，light-dark() 可能根本没进最终 CSS 文件。
验证是否真生效的方法：
– 打开 DevTools → Elements → 查看 :root 元素 computed 样式中 color 是否随系统切换变化
– 检查 Network 面板里实际加载的 CSS，搜索 light-dark 是否还存在（而非已被编译成媒体查询）
:root 必须显式声明 color-scheme，且不能被覆盖
color-scheme 不是可选提示，是硬性开关。只写在某个组件上没用，必须出现在 :root 或 html 上，且不能被更具体的选择器覆盖。
立即学习“前端免费学习笔记（深入）”；
-
:root { color-scheme: light dark; }✅ 正确 -
html { color-scheme: light dark; }✅ 等效 -
.app { color-scheme: light dark; }❌ 无效，light-dark()不认局部声明 -
:root.dark { color-scheme: dark; }❌ 一旦改成单值，light-dark()永远取第二个参数
注意：如果项目用了 <meta name="color-scheme" content="light dark">，它只影响表单控件、滚动条等 UA 样式，对 light-dark() 无任何作用。
只能用于颜色属性，且参数必须是纯色值
light-dark() 的参数类型严格限定为 <color>，这意味着：
- 支持：
black、#333、rgb(51, 51, 51)、hsl(0, 0%, 20%)、lch(30% 20 270)、rgba(0,0,0,0.8) - 不支持：
calc()、var(--c)（哪怕变量本身是颜色）、url()、linear-gradient()、transparent（某些旧版 Safari 会拒收） - 不支持非颜色属性：
font-size: light-dark(16px, 18px)❌ 语法错误，整条声明失效
常见翻车点：border: 1px solid light-dark(#ccc, #444) 看似合理，但 border 是 shorthand，浏览器可能因解析歧义而丢弃整条规则。应拆成 border-color: light-dark(...) 显式声明。
和 CSS 变量一起用时，别指望它“动态更新”
把 light-dark() 赋给变量看起来很美：--text: light-dark(#111, #eee); color: var(--text);，但它在 Safari 中存在两个致命缺陷：
- 变量值在页面首次计算后就固化，系统主题切换后不会重算 —— 用户手动切暗色，文字颜色不变
- 子元素继承的是计算后的颜色值，不是重新走一遍
light-dark()逻辑，所以嵌套结构里可能意外失配
真正可靠的写法是直接在属性上用：color: light-dark(#111, #eee);，或配合 @media (prefers-color-scheme) 分别设置变量值。后者兼容性更好，且变量更新行为明确可控。
最后提醒一句：light-dark() 是声明期解析，不触发重排重绘，这点比 JS 监听 matchMedia 更轻量；但它也意味着你无法用 JS 读取它当前“选中”的是哪个值 —— computedStyle 返回的永远是初始计算结果，不是实时响应值。
