现代CSS中的light-dark函数如何自动适配深浅颜色-css教程-PHP中文网

light-dark()不是现代css中可用函数，仅chrome124+/firefox125+/safari17.4+有条件支持，需显式声明color-scheme: light dark且仅用于颜色属性；赋值给css变量不响应切换，可靠替代方案是@media (prefers-color-scheme)。

现代css中的light-dark函数如何自动适配深浅颜色

light-dark() 不是现代 CSS 中“可用”的函数，它目前仅在极有限条件下被部分新浏览器解析，且极易因配置缺失而静默失效。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

`light-dark()` 在 Chrome/Firefox/Safari 中为何不生效

浏览器必须 ≥ Chrome 124 / Firefox 125 / Safari 17.4，旧版本（包括绝大多数 Android WebView、微信 X5 内核）直接忽略整条声明，不报错、不警告、不回退
:root 或目标元素上必须显式声明 color-scheme: light dark，写在 .app 或用 JS 动态加到 body 上均无效
参数只能是纯色值：#333、rgb(0,0,0)、CanvasText ✅；var(--c)、transparent、calc() ❌
仅可用于颜色类属性：color、background-color、border-color ✅；border（shorthand）、font-size、filter ❌
若你用的是 Vite 4.x、Next.js 13（未升级）、旧版 Webpack，CSS 处理器可能在构建阶段就剔除该语法，最终产物里压根没有这条规则

把 `light-dark()` 赋给 CSS 变量为什么危险

写法如 --text: light-dark(black, white) → 值在页面加载时静态计算，系统切换后永不更新
子元素继承的是已计算出的固定颜色，不是重新走判断逻辑
若父元素有 color: red，子元素 color: var(--text) 会继承 red，而非触发重算
Safari 17.4+ 中“看似有效”，实为 bug 级别行为，不能作为兼容方案依赖

替代方案：用 `@media (prefers-color-scheme)` 真正可靠

兼容性好：@media (prefers-color-scheme: dark) 在 Chrome 87+、Firefox 96+、Safari 14+ 稳定支持
所有颜色统一抽成变量，集中定义在 :root 中
深色规则必须放在浅色规则之后，否则会被覆盖
配合 <meta name="color-scheme" content="light dark">，才能让 <input>、滚动条等 UA 控件响应

示例：

:root {
--text: #333;
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
  --text: #eee;
  --bg: #1a1a1a;
}
}
body {
color: var(--text);
background: var(--bg);
}

最易被忽略的一点：SSR 场景下首次 HTML 输出无法感知客户端偏好，必须靠 JS 补切或加 <noscript></noscript> 回退。所谓“一行搞定”的 light-dark()，背后要么是构建工具编译，要么是 JS 监听 matchMedia('(prefers-color-scheme)')，它本身不是运行时能力。