light-dark() 不是原生 CSS 函数，而是 PostCSS 插件（如 postcss-light-dark）提供的编译期语法糖，会将 color: light-dark(black, white) 编译为默认样式加 @media (prefers-color-scheme: dark) 块；未接入插件时该写法被浏览器直接忽略。
light-dark() 函数在 CSS 中根本不存在
它不是标准 CSS 函数，也不被任何浏览器原生支持。你看到的 light-dark() 很可能来自某个 PostCSS 插件（比如 postcss-light-dark）或构建工具的自定义转换逻辑，属于“编译期糖”，不是运行时能力。
实际能用的明暗模式适配方案只有两个可靠路径
CSS 原生支持靠 @media (prefers-color-scheme)；现代框架/工具链则依赖 JS 驱动 + CSS 变量注入。别指望写个 light-dark(black, white) 就自动切换——那只是语法幻觉。
- 纯 CSS 场景：必须手写媒体查询块，
color、background等属性得分别声明 - CSS 变量场景：把主题色抽成
--text-primary这类变量，在@media里重设值，再全局引用 - JS 控制场景：监听
prefers-color-scheme变化，动态切document.documentElement的 class 或 style 属性
PostCSS 插件里的 light-dark() 是怎么工作的
像 postcss-light-dark 这类插件，会把 color: light-dark(black, white) 编译成两段 CSS：一段默认色、一段暗色媒体查询块。它不改变浏览器行为，只帮你省去重复写 @media 的体力活。
- 输入：
border-color: light-dark(#ccc, #333); - 输出：
border-color: #ccc;<br>@media (prefers-color-scheme: dark) {<br> border-color: #333;<br>} - 注意：插件不会处理 JS 里读取的 computedStyle，也不会响应系统设置实时变更（除非配合 JS 监听）
- 如果没配插件，这类写法直接被浏览器忽略——连警告都不会抛
容易被忽略的兼容性细节
@media (prefers-color-scheme) 在 Safari 12.1+、Chrome 76+、Firefox 96+ 才稳定支持。iOS 13/iPadOS 13 是第一个带该特性的苹果系统版本，但旧版微信内置浏览器（X5 内核）至今不认这个媒体查询。
立即学习“前端免费学习笔记（深入）”；
- 不要假设用户开了系统级暗色模式就一定触发：有些 Android 定制 ROM 或企业设备策略会屏蔽该偏好
-
light-dark()类插件生成的 CSS 体积会翻倍，对超大组件库要留意打包后 CSS 增长 - 服务端渲染（SSR）场景下，首次 HTML 输出无法感知客户端偏好，得靠 JS 补切或加
no-script回退逻辑
light-dark() 前，先确认构建链路是否真接入了对应转换器，否则它就是一段死代码。 
