light-dark() 终于进 Baseline 了——不用媒体查询也能自动切换主题色，color() 还顺手把色彩空间也换了

以前给设计系统配颜色，全靠 Sass 变量和构建脚本算来算去。现在浏览器自己就能搞定了，而且比你用 Sass 算得还准——因为它懂色彩空间。

今年有两个 CSS 颜色函数悄悄进了 Baseline：一个是 color()，可以让你用任意色彩空间指定颜色，还能做相对颜色转换；另一个是 light-dark()，专门解决暗色模式切主题色的问题，连媒体查询都不用写。这两个函数加在一起，把设计系统的颜色管理方式直接换了一套。

color()：不只是换个写法，是换了一套色彩空间

color() 函数看起来只是 rgb() 的另一个写法，但实际上它支持任何色彩空间。你可以用 display-p3 这种广色域来指定颜色，让大多数现代屏幕上的颜色比 sRGB 更鲜艳。

/* sRGB（传统写法） */
.button { background: color(srgb 0.2 0.5 0.8); }

/* display-p3（广色域，颜色更鲜艳） */
.button { background: color(display-p3 0.25 0.48 0.78); }

更重要的是相对颜色语法。这个功能的意思是：基于一个已有颜色，算出一个新颜色。比如你想把品牌主色的亮度提高 20%，直接写：

:root {
  --brand: #3b82f6;
}

.variant-light {
  background: color(from var(--brand) srgb calc(r * 1.2) calc(g * 1.2) calc(b * 1.2));
}

浏览器会先把 #3b82f6 转成 sRGB 的 r、g、b 三个分量，然后每个乘以 1.2 得到更亮的颜色。整个过程在浏览器里跑，不依赖任何构建工具。

过去这件事要靠 Sass 的 lighten() 函数或者 PostCSS 插件才能做。现在几行原生 CSS 就解决了，而且结果比 Sass 的算法更精确——因为浏览器做的是真实的色彩空间转换。

light-dark()：不用写媒体查询，浏览器自己切

暗色模式切换以前的标准做法是写一层 @media (prefers-color-scheme: dark)，然后把所有颜色重新写一遍。代码多、容易漏、后期维护成本高。

light-dark() 把这个逻辑压缩成了一个函数：

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#1a1a1a, #f5f5f5);
  background: light-dark(#f5f5f5, #1a1a1a);
}

.card {
  border-color: light-dark(rgba(0,0,0,0.1), rgba(255,255,255,0.1));
}

只要 :root 上声明了 color-scheme: light dark，浏览器会根据系统主题自动返回对应的颜色值。不需要媒体查询，不需要 JavaScript，CSS 一行搞定。

这个函数的另一个好处是支持图片。比如亮色模式下用浅色图标、暗色模式下用深色图标：

.icon {
  background-image: light-dark(
    url("icon-light.svg"),
    url("icon-dark.svg")
  );
}

配合 CSS 变量用，整站的暗色模式维护成本直接降了一个量级。

把两个函数合起来：设计系统的颜色方案

把 color() 和 light-dark() 组合在一起，可以做出一个完全不用构建工具的设计系统颜色方案：

:root {
  --surface: #ffffff;
  --text: #1a1a1a;
  --primary: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1a1a1a;
    --text: #f5f5f5;
  }
}

/* 用 color() 基于主色生成浅 15% 的 hover 态 */
.button:hover {
  background: color(from var(--primary) srgb
    calc(r * 1.15)
    calc(g * 1.15)
    calc(b * 1.15));
}

/* 用 light-dark() 自动切边框颜色 */
.card {
  border: 1px solid light-dark(
    rgba(0, 0, 0, 0.1),
    rgba(255, 255, 255, 0.1)
  );
  color: var(--text);
  background: var(--surface);
}

这套写法完全不依赖 Sass、PostCSS 或者任何 CSS-in-JS 方案。只要浏览器支持，两个函数搞定从主题色生成到暗色模式切换的全部需求。

浏览器支持情况

light-dark() 从 Chrome 123 开始支持，Safari 17.5、Firefox 128 全部支持。color() 的相对颜色语法同样是 Baseline 2026 新支持的功能。2026 年的主流浏览器全部支持这两个函数，不需要 polyfill，可以直接用。

下一步

如果你的项目还在用 Sass 的颜色函数做变体生成，第一件事可以把主色的变体逻辑迁移到 color() 的相对颜色语法上，感受一下不用跑构建脚本的颜色计算。如果暗色模式还是用媒体查询重写全站颜色，第二件事可以把切换逻辑换成 light-dark()，一行替换掉几十行 @media 块。

两个函数都不需要装任何依赖，浏览器原生支持，上手门槛极低——这是近年来 CSS 颜色能力提升最大的一次，值得现在就把项目里的颜色管理方案升级了。