light-dark() 仅在 Chrome 124+/Firefox 125+/Safari 17.4+（需系统及配置匹配）中实验性支持，且必须满足 color-scheme 声明、纯色参数、仅用于颜色属性三条件，否则整条声明被静默丢弃。
light-dark() 不是“拿来就能用”的现代 CSS 函数，它在绝大多数真实项目中根本不会生效——除非你同时满足三个硬性条件：浏览器版本 ≥ Chrome 124 / Firefox 125 / Safari 17.4，:root 显式声明了 color-scheme: light dark，且只把它用在颜色属性（如 color、background-color）里传纯色值。
light-dark() 在哪些浏览器里真能跑？
它不是 CSS 标准函数，而是 CSS Color Module Level 5 的**实验性特性**，目前仅极少数新版本浏览器实现：
- Chrome 124+（2024 年 4 月发布）起支持，但必须开启
chrome://flags/#enable-css-light-dark实验标志（稳定版默认关闭） - Firefox 125+（2024 年 5 月）支持，需启用
layout.css.light-dark.enabled首选项 - Safari 17.4+（2024 年 3 月）支持，但仅限 macOS Sonoma 14.4+ 和 iOS 17.4+，旧版 iOS Safari（包括微信 X5 内核）完全无视
- 所有低于这些版本的浏览器（含当前主流 LTS 版本、企业环境、国内安卓 WebView）会直接丢弃含
light-dark()的整条 CSS 声明，不报错、不回退、不警告
为什么写了 light-dark() 却没效果？
常见失效原因不是语法错，而是隐性依赖被忽略：
-
:root没写color-scheme: light dark→ 函数返回unset，整条样式无效 - 写在
.theme-dark类或body.dark上 →light-dark()只响应:root或html的color-scheme，子元素声明无效 - 参数用了
var(--c)、transparent或rgba(0,0,0,0.5)→ 仅接受#fff、rgb(0,0,0)、CanvasText等纯色值，其余全解析失败 - 用在
border简写里：border: 1px solid light-dark(#ccc, #444)→ shorthand 不支持函数调用，整条声明被浏览器跳过
light-dark() 和 @media (prefers-color-scheme) 的本质区别
它们解决的是不同层面的问题：
立即学习“前端免费学习笔记（深入）”；
-
@media (prefers-color-scheme: dark)是 W3C 标准、兼容性好（Chrome 87+、Firefox 96+、Safari 14+），靠媒体查询触发，可覆盖任意属性，且服务端渲染（SSR）也能预判输出 -
light-dark()是运行时计算函数，依赖浏览器对color-scheme的协商结果，不生成额外 CSS 规则，但无法被 JS 读取（getComputedStyle返回空）、无法动态切换（只能响应系统偏好，不能手动强制）、也不支持 SSR 首屏适配 - 构建工具（如 Vite、Webpack）若未配置对应 PostCSS 插件，会在 CSS 压缩阶段直接剔除
light-dark()—— 你写的代码根本进不了最终 CSS 文件
别被“一行切换”误导：真正可靠的替代路径
想少写重复代码又不失兼容性，用标准方案更稳：
- 把所有主题色抽成变量：
:root { --text-primary: #333; --bg: #fff; } - 用媒体查询覆盖：
@media (prefers-color-scheme: dark) { :root { --text-primary: #eee; --bg: #111; } } - 全局引用变量：
body { color: var(--text-primary); background: var(--bg); } - 需要手动开关时，加一个
.js-theme-darkclass，用 JS 切换document.documentElement.classList，再在 CSS 里写.js-theme-dark :root { --text-primary: #eee; }
复杂点在于：CSS 变量必须显式声明、var() 必须带 fallback（否则未定义时回退到浏览器默认），而 light-dark() 表面简洁，实则把兼容性、调试、SSR、JS 交互这些关键问题全推给了“运气”。
