CSSlight-dark函数使用教程

CSS 中并不存在原生的 `light-dark()` 函数，它只是 PostCSS 等构建工具提供的编译期语法糖（如 `postcss-light-dark` 插件），会将类似 `color: light-dark(black, white)` 的写法自动展开为默认样式加 `@media (prefers-color-scheme: dark)` 块；若未配置对应插件，该语法会被浏览器完全忽略、不报错也不生效。真正可靠的明暗模式适配只有三条路径：纯 CSS 媒体查询手动声明、CSS 变量配合媒体查询动态重设、或 JS 监听系统偏好并切换类名/样式——没有“开箱即用”的魔法函数，所有看似自动的切换背后都是明确的编译逻辑、变量控制或运行时响应，盲目使用 `light-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 回退逻辑

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~