light-dark() 并非现成可用的 css 特性，需满足 color-scheme 声明、仅用于颜色属性、参数为纯色值三前提，否则失效；推荐用 @media + css 变量替代。
light-dark() 不是现代 CSS 的“可用特性”，直接写它不会提升任何东西，只会让样式失效——除非你确认构建链路已接入对应 PostCSS 插件，或浏览器版本 ≥ Chrome 124 / Firefox 125 / Safari 17.4 且满足全部前提条件。
为什么 light-dark() 在大多数项目里根本不会生效
你在 DevTools 里看不到效果，color: light-dark(#333, #fff) 被静默丢弃，甚至控制台都不报错。这不是 bug，是标准缺失下的必然结果：MDN、Can I Use 均无该函数条目；所有主流浏览器在未启用实验性 flag 的稳定版中均不解析该函数；Vite、Webpack、Next.js 默认 CSS 处理器会直接剔除不认识的函数调用。
-
:root没加color-scheme: light dark→ 整个light-dark()返回unset - 参数用了
var(--c)、transparent或calc()→ 解析失败，声明作废 - 写在
border等 shorthand 属性里 → 浏览器拒绝解析整条规则 - 目标环境是微信 X5 内核、旧版 Safari 或 Android 定制 ROM → 媒体查询本身都不支持，更别说这个函数
light-dark() 真正起作用的三个硬性前提
它不是“写了就能用”的语法糖，而是一组脆弱的运行时契约。漏掉任一条件，代码就等于没写。
-
:root或html元素必须显式声明color-scheme: light dark（不能写在.app或body上） - 仅限颜色类属性：
color、background-color、border-color✅；font-size、padding、border（shorthand）❌ - 参数只能是纯色值：
#333、rgb(0,0,0)、CanvasText✅；var(--x)、hsl(0,0%,0%)、currentcolor❌
真正简洁又可靠的替代方案：@media + CSS 变量
不用构建工具、不依赖新浏览器、不增加打包体积，还能保持逻辑集中、变量复用、语义清晰。
- 在
:root定义默认值：--text-primary: #333、--bg: #fff - 用
@media (prefers-color-scheme: dark)覆盖深色值：:root { --text-primary: #eee; --bg: #111; } - 所有使用处统一写
color: var(--text-primary)—— 漏掉var()就回退到浏览器默认，这是明确可控的降级 - 配合
<meta name="color-scheme" content="light dark">，连表单控件、滚动条等 UA 样式也能自动适配
想保留 light-dark() 写法？先跑通这三步验证
否则就是把维护性建立在幻觉之上。
- 查当前运行环境：
matchMedia('(prefers-color-scheme: dark)').matches是否能正确响应系统切换 - 检查最终生成的 CSS 文件里，
light-dark()是否已被转译为两段规则（如插件输出），还是原样残留 - 在目标设备上打开 DevTools → Elements → 计算样式，确认
color等属性是否真实取到了深色值，而非空或 fallback
最常被忽略的一点：light-dark() 不响应 JS 动态修改系统偏好（比如模拟切换），也不支持手动强制主题；它只认操作系统原生信号，且无法与 class 切换逻辑共存。真要兼顾自动+手动+持久化，还是得回到 @media + document.documentElement.classList 这套组合拳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
