极简实现跨端暗黑模式的关键是显式声明 color-scheme: light dark，否则 light-dark() 无效；它仅响应系统偏好或 color-scheme 设置，不响应 class 或 localStorage 切换，且 CSS 变量中使用时必须确保定义作用域已声明 color-scheme。
light-dark() 函数本身不触发切换，它只响应系统偏好或 color-scheme 设置——想“极简实现跨端暗黑模式切换”，关键不在函数怎么写，而在于你是否控制了颜色方案的源头。
必须声明 color-scheme: light dark，否则 light-dark() 无效
这是最容易被跳过的一步。很多开发者写了 color: light-dark(#333, #fff) 却发现深色模式下颜色没变，根本原因是根元素没声明支持两种方案。
-
:root或html上必须显式设置color-scheme: light dark - 只写
color-scheme: dark会让所有light-dark()固定取第二个值，失去响应性 - 在 iOS Safari 和 Android Chrome 中，缺失该声明会导致
light-dark()完全不计算，回退为初始值（通常是透明或继承色）
light-dark() 只认系统偏好，不认 localStorage 或 class 切换
如果你用 JavaScript 给 加 class="dark" 来手动切主题，light-dark() 不会理你——它只看两个信号：prefers-color-scheme 媒体查询结果，和当前元素的 color-scheme 计算值。
- 要支持“手动切换 + 跟随系统”双模式，得用
color-scheme覆盖：比如给.theme-manual-dark元素设color-scheme: dark，它的子元素里light-dark()就永远取第二个参数 - 不能靠 JS 改 class 然后指望
light-dark()自动重算；它不是 reactive 的，是基于渲染时的 color-scheme 上下文静态求值的 - 跨端一致性依赖系统级设置：iOS/Android/macOS 的深色开关打开后，
prefers-color-scheme: dark才为真，light-dark()才会选第二参数
变量复用时，light-dark() 必须定义在支持双 scheme 的作用域内
把 light-dark() 写进 CSS 变量里很常见，但变量的作用域必须能“看到”有效的 color-scheme，否则取值就错。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
:root { --text: light-dark(#333, #fff); }但:root没设color-scheme→ 变量值无效 - 正确写法：
:root { color-scheme: light dark; --text: light-dark(#333, #fff); } - 如果某组件强制深色（如弹窗），可单独设
.modal-dark { color-scheme: dark; --text: light-dark(#333, #fff); }，此时变量在该组件内恒取#fff - 注意：CSS 变量本身不携带 scheme 信息，
light-dark()的求值发生在使用处，不是定义处
真正极简的跨端暗黑模式，不是靠一行函数搞定的，而是靠三件事对齐：系统偏好可读、color-scheme 显式声明、light-dark() 用在有上下文的地方。漏掉任意一环，它就在某些安卓 WebView 或旧版 Safari 里静默失效——这种失效没有报错，只有颜色不对，最难排查。
