light-dark()并非标准css函数，截至2026年9月仅chrome 124+、firefox 125+、safari 17.4+有限支持，需配合color-scheme: light dark声明，旧版本浏览器静默忽略且无降级；可靠方案仍是@media (prefers-color-scheme)与js监听结合。
light-dark() 在低版本系统中根本不会生效——它不是“兼容性差”，而是压根不存在。截至 2026 年 9 月，Chrome 124+、Firefox 125+、Safari 17.4+ 才原生支持该函数，且必须配合 color-scheme: light dark 声明；所有更早版本（如 Safari 16.x、Chrome 120 以下、Android WebView X5 内核）都会静默忽略该语法，不报错、不降级、不 fallback。
为什么加了 light-dark() 却在 iOS 15 或微信里完全没反应
常见误判是以为“浏览器不支持就用默认值”，实际行为是：未识别的函数直接被解析器丢弃，属性值退化为 unset，最终回退到继承值或浏览器初始值（比如 color 变成黑色，background-color 变成白色）。这和你期望的“浅色取第一个参数”完全相反。
- iOS 15/Safari 15.6 不支持
light-dark()，哪怕写了color-scheme: light dark也无效 - 微信内置浏览器（X5 内核）至今不识别
@media (prefers-color-scheme)，更别说light-dark() - 部分 Android 定制 ROM 屏蔽了系统偏好上报，
window.matchMedia('(prefers-color-scheme: dark)')直接返回matches: false - 本地用
file://协议打开时，Safari 强制禁用该媒体查询，Chrome 也可能降级处理
别依赖 @supports (color: light-dark(black, white)) 做渐进增强
这个写法看似合理，但实际无效：@supports 检测的是 CSS 解析能力，而低版本浏览器对 light-dark() 的处理是“跳过整条声明”，不是“解析失败”。结果就是：检测永远返回 false，你的降级样式块根本不会被加载。
- 真正可用的检测方式只有 JS 运行时判断：
matchMedia('(prefers-color-scheme: dark)').matches - 若需服务端区分，必须依赖请求头
Sec-CH-Prefers-Color-Scheme（仅 Chromium 系新支持，iOS Safari 不发此头） - 想覆盖旧环境，唯一可靠路径是：先写默认浅色样式 → 再用
@media (prefers-color-scheme: dark)覆盖 → 最后用 JS 补监听并动态切class
如何让老系统用户至少看到一致的浅色主题
关键不是“适配暗色”，而是“防止错乱”。很多老系统用户看到白底黑字是正常的，但绝不能出现文字和背景同色、按钮消失、滚动条不可见等致命问题。
- 所有
var(--xxx)必须带默认值：:root { --text: #333; --bg: #fff; }，否则不支持变量的浏览器会渲染为透明或不可读色 -
<meta name="color-scheme" content="light dark">必须加在里——这是触发 iOS Safari 原生控件（input、select、滚动条）变暗的唯一开关，CSS 里的color-scheme声明无法替代 - 第三方组件（如 Bootstrap 4、Element UI）的颜色要单独桥接：用更高权重的规则覆盖其硬编码值，例如
input:not([type="checkbox"]):not([type="radio"]) { background: var(--input-bg) !important; } - 图片、SVG 图标等非颜色属性无法用
light-dark()切换，必须用fill: currentColor或 JS 动态替换src
最易被忽略的一点：深色模式适配成败不取决于你用了多少新语法，而在于是否切断了所有硬编码颜色的传播路径。哪怕只漏掉一个 border: 1px solid #eee，它就会在深色背景下变成一道刺眼的亮线——这种细节，在低版本系统里反而更难调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
