light-dark()不是现代CSS中可用函数，仅Chrome124+/Firefox125+/Safari17.4+有条件支持，需显式声明color-scheme: light dark且仅用于颜色属性；赋值给CSS变量不响应切换，可靠替代方案是@media (prefers-color-scheme)。
light-dark() 不是现代 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> 回退。所谓“一行搞定”的 light-dark()，背后要么是构建工具编译，要么是 JS 监听 matchMedia('(prefers-color-scheme)')，它本身不是运行时能力。
