CSS自动适配主题，light-dark函数使用技巧

CSS 中的 light-dark() 函数并非标准特性，目前仅在新版 Chrome 和 Safari 中有限支持且需手动启用或受限于特定属性，Firefox 及旧浏览器则完全静默忽略；更关键的是，它无法响应系统主题动态切换——尤其当赋值给 CSS 变量时，计算结果固化、不继承重算，导致深色/浅色模式切换失效；真正跨浏览器稳定可靠的方案仍是原生 @media (prefers-color-scheme) 媒体查询，配合正确顺序、完整分支和 color-scheme 声明才能确保一致体验；构建工具中的 light-dark() 仅是编译时语法糖，本质仍生成媒体查询代码，若未接入对应插件则纯属无效写法——自动适配没有捷径，理解底层机制比依赖“一行代码”更重要。

light-dark() 在浏览器里根本不能直接用

它不是标准 CSS 函数，Chrome 125+ 和 Safari 17.4+ 里看似能写，但前提是：Chrome 必须手动打开 chrome://flags/#enable-css-light-dark，Safari 只支持 color、background-color 等有限属性，且不支持嵌套在 calc() 或自定义属性里。Firefox 和所有旧版浏览器直接忽略整条声明——连警告都没有，样式就静默失效。

为什么把 light-dark() 赋给 CSS 变量会失效

常见错误写法：:root { --text: light-dark(black, white); }，再用 color: var(--text)。这在 Safari 17.4+ 里可能“看起来”有效，但有两个硬伤：

• 变量值只在页面加载时计算一次，系统主题切换后不会更新
• 子元素继承的是已计算出的固定颜色，不是重新走 light-dark() 判断
• 如果父元素有 color 声明，子元素 var(--text) 会继承那个值，而不是触发主题重算

真正可靠的替代方案只有 @media (prefers-color-scheme)

这是唯一被 Chrome 76+、Firefox 67+、Safari 12.1+ 全面支持的原生方案。关键点不是“怎么写”，而是“怎么写才不出错”：

• 必须同时写 @media (prefers-color-scheme: light) 和 @media (prefers-color-scheme: dark)，不能只写 dark 分支——否则无偏好或 light 模式下变量未定义，页面可能全白或全黑
• color-scheme: light dark 要加在 :root 上，它不只是为 light-dark() 服务，还影响表单控件、滚动条等系统级渲染
• 深色规则必须放在浅色规则之后，否则会被覆盖；建议把所有主题变量集中定义在 :root 里，用媒体查询重设

构建工具里用 light-dark() 的前提是你真配了插件

像 postcss-light-dark 这类插件，本质是把 color: light-dark(black, white) 编译成两段 CSS：color: black; + @media (prefers-color-scheme: dark) { color: white; }。它不改变浏览器能力，只是省体力活。

• 没接入插件时，所有 light-dark() 写法都是死代码，构建产物里照样存在，但浏览器直接跳过
• 插件生成的 CSS 体积会翻倍，组件库大时得留意打包后体积增长
• SSR 场景首次 HTML 输出无法感知客户端偏好，仍需 JS 补切或加

别被“一行搞定”的宣传误导——真正的自动适配背后，要么是明确的媒体查询，要么是 JS 监听 matchMedia('(prefers-color-scheme)') 并动态更新 class 或 CSS 变量。light-dark() 不是魔法，是语法糖，糖化失败时，你得知道底料是什么。

好了，本文到此结束，带大家了解了《CSS自动适配主题，light-dark函数使用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！