light-dark() 在2026年生产环境不可直接使用，它非浏览器原生标准，需依赖构建工具编译或实验性flag；真正可靠的是@media (prefers-color-scheme)媒体查询方案。
light-dark() 在当前（2026年）的生产环境里不能直接用，它不是浏览器原生支持的标准函数，所有看似生效的写法，背后要么是构建工具编译转换，要么是浏览器实验性 flag 强行启用——上线前必须确认链路是否真实可靠。
light-dark() 被浏览器忽略的典型现象
写了 color: light-dark(black, white) 却始终显示黑色；background-color: light-dark(#fff, #111) 在暗色系统下毫无反应；更隐蔽的是：赋值给 CSS 变量后（如 --text: light-dark(black, white)），子元素用 var(--text) 继承时颜色固定不变，系统切换主题后完全不更新。
这些都不是你写错了，而是浏览器根本没解析这行代码——Firefox 全版本静默跳过，Chrome 125+ 默认关闭，Safari 17.4+ 仅允许在 color、background-color 等极少数属性中使用，且不支持嵌套 calc() 或变量。
- Chrome 需手动访问
chrome://flags/#enable-css-light-dark并启用，上线环境不可能依赖这个 - Safari 中若未声明
:root { color-scheme: light dark; }，light-dark()永远返回第一个参数 - 任何构建工具（如 PostCSS）未接入
postcss-light-dark插件时，源码里的light-dark()就是死代码，打包后仍存在但无效
@media (prefers-color-scheme) 是唯一可信赖的原生方案
这是 Chrome 76+、Firefox 96+、Safari 12.1+ 全面支持的方案，无需插件、无需 flag，且能控制任意属性（不只是颜色）。
关键实操细节：
-
@media (prefers-color-scheme: dark)必须成对出现——浅色分支不写也行，但暗色分支之后，务必确保浅色样式已定义为默认值，否则无偏好时页面可能全黑 - 所有主题变量应集中定义在
:root，暗色覆盖写在媒体查询内部，例如：:root { --text: #333; --bg: #fff; }<br>@media (prefers-color-scheme: dark) { :root { --text: #eee; --bg: #111; } } - 必须加
html { color-scheme: light dark; }，否则表单控件、滚动条、地址栏等原生 UI 不会响应主题切换 - 媒体查询块要放在 CSS 文件靠后位置，避免被前面同名规则覆盖
light-dark() 在构建链路中怎么才算真正可用
只有当你明确配置了 PostCSS 插件（如 postcss-light-dark），且确认它已接入构建流程时，light-dark() 才有意义——它本质是语法糖，会被编译成两段 CSS。
例如输入：
border-color: light-dark(#ccc, #333);输出实际是：
border-color: #ccc;<br>@media (prefers-color-scheme: dark) { border-color: #333; }
- 插件不会处理 JS 中读取的
getComputedStyle值，也不会自动响应运行时系统切换（除非额外配 JS 监听） - 每个用到
light-dark()的属性都会让 CSS 体积翻倍，组件库大时需评估打包膨胀风险 - SSR 场景首次 HTML 渲染无法感知客户端偏好，仍需 JS 补切或加
<noscript></noscript>回退逻辑
为什么把 light-dark() 赋给 CSS 变量后不响应切换
因为变量值在计算时就被固化了——--text: light-dark(black, white) 在页面加载时只算一次，结果存入变量，后续系统切换不会重新触发该函数。子元素继承的是这个静态值，不是函数本身。
更麻烦的是：如果父元素设置了 color: red，子元素写 color: var(--text)，它继承的是 red，而不是去重新走一遍 light-dark() 判断。
真正能动态响应的只有两种方式：
- 原生媒体查询直接作用于具体属性（如
@media { p { color: white; } }） - JS 监听
window.matchMedia('(prefers-color-scheme)')，动态切换document.documentElement的 class 或内联 style
所谓“一行搞定”的 light-dark()，掩盖了底层仍是媒体查询或 JS 响应的事实。别在没验证构建链路和浏览器支持范围的前提下，把它当真功能用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
