CSS light-dark() 如何实现主题色自动切换：从 color-scheme 到 UA 样式
设计系统常把浅色与深色主题写进两套自定义属性，再用媒体查询覆盖，维护成本高且容易漏改。本文以组件库主题切换为场景，解释 light-dark() 如何依据 color-scheme 的计算值返回对应颜色，说明它与自定义属性、prefers-color-scheme 媒体查询的差异，并给出显式声明 color-scheme、回退策略与可观测信号的工程做法。
#设计系统
共 3 篇文章
CSS 相对颜色语法如何从现有颜色派生新颜色：从颜色计算到设计系统
相对颜色语法让浏览器在运行时基于已有颜色通道计算新颜色，无需 Sass 或 JavaScript 预处理。文章以主题色生成悬停态为贯穿场景，解释 from 关键字与通道变量的处理模型，对比 color-mix() 的混合逻辑，说明与 Sass 颜色函数的差异、浏览器支持边界与回退写法。
CSS color() 与 OKLCH：为什么广色域颜色在 sRGB 屏幕上会失真
本文以设计系统主题色为例，解释 CSS color() 函数与 OKLCH 色彩空间如何定义超出 sRGB 的广色域颜色，以及当显示设备不支持时浏览器如何通过色域映射将颜色转换到 sRGB，导致颜色失真。文中对比 HEX/RGB 的局限，并给出使用 color() 与 @media (color-gamut) 的实践建议。