#light-dark

CSS light-dark() 如何实现主题色自动切换：从 color-scheme 到 UA 样式

设计系统常把浅色与深色主题写进两套自定义属性，再用媒体查询覆盖，维护成本高且容易漏改。本文以组件库主题切换为场景，解释 light-dark() 如何依据 color-scheme 的计算值返回对应颜色，说明它与自定义属性、prefers-color-scheme 媒体查询的差异，并给出显式声明 color-scheme、回退策略与可观测信号的工程做法。