light-dark()不是标准CSS函数，浏览器原生不支持；必须用@media (prefers-color-scheme)配合:root变量和var()调用，且color-scheme声明与meta标签缺一不可。
light-dark() 在现代 CSS 中不能直接使用——它不是浏览器原生支持的标准函数，也不是“写了就能跑”的语法糖。你看到的可用效果，几乎都来自构建工具插件（比如 postcss-light-dark）的编译转换，或极新版本浏览器（Chrome 124+ / Safari 17.4+ / Firefox 125+）在严苛前提下的有限实验性支持。
light-dark() 被浏览器静默忽略的常见原因
你在 DevTools 里看不到效果，大概率是因为以下某一条成立：
-
:root上没写color-scheme: light dark→ 整条light-dark()声明被丢弃，不报错、不警告 - 用了
border: 1px solid light-dark(#ccc, #333)这类 shorthand 属性 → 浏览器解析失败，整条border声明失效 - 参数含
var(--c)、transparent或calc()→ 只接受纯色值，如#333、rgb(0,0,0)、CanvasText - 在 iOS Safari 17.2、微信 X5 内核、旧版 Edge 等环境测试 → 这些环境根本不识别该函数
- CSS 经过未配置插件的 Vite 4.x / Webpack 5 构建 →
light-dark()被处理器直接剔除，不出现在最终 CSS 文件中
@media (prefers-color-scheme) 是唯一稳定方案
真正跨浏览器、零构建依赖、服务端渲染友好的方式，只有手写媒体查询。关键不是“怎么少写”，而是“怎么写不翻车”：
- 深色规则必须放在浅色规则之后，否则会被覆盖；建议所有主题变量集中定义在
:root里 -
color-scheme: light dark必须加在:root或html上，它影响表单控件、滚动条等 UA 渲染行为 - 所有颜色引用必须用
var(--text-primary)，漏掉就回退到浏览器默认值（可能全黑/全白） - 别只写
@media (prefers-color-scheme: dark)分支——无偏好或浅色模式下变量未定义，页面可能不可读 - 搭配
<meta name="color-scheme" content="light dark">才能让<input>、<select>自动适配
想保留 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()生成两份声明，组件库大时打包产物显著膨胀
最易被忽略的一点：服务端渲染（SSR）首次 HTML 输出无法感知客户端偏好，light-dark() 和媒体查询都无法生效——必须靠 JS 补切，或提供 <noscript> 回退逻辑。所谓“一行搞定”，背后全是条件和取舍。
