light-dark() 在绝大多数真实项目中不能直接使用——它不是浏览器原生支持的函数，需依赖构建工具编译或极新浏览器（Chrome 124+/Firefox 125+/Safari 17.4+）的实验性支持，否则会被浏览器静默忽略。
light-dark() 在绝大多数真实项目中不能直接使用——它不是浏览器原生支持的函数，写了也不会生效。你看到的“可用”效果，基本都来自构建工具编译（如 postcss-light-dark）或极新浏览器（Chrome 124+ / Firefox 125+ / Safari 17.4+）在严苛条件下的实验性支持。不确认环境就写，等于埋下静默失效的坑。
light-dark() 直接写在 CSS 里为什么没反应
浏览器会直接忽略 light-dark()，不报错、不警告，样式就没了。常见原因包括：
-
:root上没加color-scheme: light dark→ 整条声明被丢弃 - 写在
.app或body上，而不是:root或html→ 不识别 - 用在
border这类 shorthand 属性里，例如border: 1px solid light-dark(#ccc, #333)→ 解析失败，整条声明作废 - 参数含
var(--c)、transparent或calc()→ 只接受纯色值，如#333、CanvasText - 在 iOS Safari 17.2、微信 X5 内核、旧版 Edge 中测试 → 根本不支持，回退为无样式
@media (prefers-color-scheme: dark) 是唯一稳定方案
这是 Chrome 76+、Firefox 96+、Safari 14+ 全面支持的原生方式，无需构建工具，服务端渲染友好，且能控制表单控件、滚动条等 UA 行为。
- 所有主题变量必须先在
:root定义默认值（浅色）：--text-primary: #333 - 深色规则必须放在浅色规则之后，否则被覆盖
- 必须写全两个分支：
@media (prefers-color-scheme: light)和@media (prefers-color-scheme: dark)，否则系统设为no-preference时变量未定义，页面可能全白或全黑 - 搭配
<meta name="color-scheme" content="light dark">才能让<input>、<select></select>自动适配 - 所有颜色引用必须带
var(--text-primary)，漏掉就回退到浏览器默认值（可能不可读）
想保留 light-dark() 写法？先过这三关
否则就是把死代码当活逻辑用：
立即学习“前端免费学习笔记（深入）”；
- 目标用户浏览器是否 ≥ Chrome 124 / Firefox 125 / Safari 17.4？查
navigator.userAgent或用matchMedia('(prefers-color-scheme: dark)').matches实时判断 - 构建链路是否真接入了
postcss-light-dark类插件？没配插件时，light-dark()就是注释级存在——浏览器跳过，打包后还在，但毫无作用 - 是否接受 CSS 体积翻倍？插件会为每个
light-dark()生成两份声明，组件库大时打包产物显著膨胀
最易被忽略的一点：即使你用了 light-dark() 并配了插件，它生成的仍是静态媒体查询，无法响应系统偏好实时变更（比如用户中途切主题）。要真正动态响应，还得靠 JS 监听 matchMedia 并触发重计算或 class 切换。
