CSS color-scheme属性与light-dark()颜色函数

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12241
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、从light-dark()颜色函数开始

light-dark()这个 CSS 函数接受两种颜色或两个图像，并根据当前页面的配色方案返回一种颜色或一个图像，无需 prefers-color-scheme 媒体查询进行匹配。

关于prefers-color-scheme

prefers-color-scheme媒体查询在“你不知道的CSS media查询与用户体验”一文中有介绍过，可以匹配系统层面设置的是深色模式，还是浅色模式。

/* 深⾊模式 */
@media (prefers-color-scheme: dark) {}
/* 浅⾊模式 */
@media (prefers-color-scheme: light) {}

这个媒体查询设计初衷是好的，但是落地到实际开发中，却是个鸡肋。

为何？很简单，只有高级用户才会在系统层面设置深色模式还是浅色模式，对于客户端的软件而言（网页也包括在内），对用户体验友好的交互方式应该是在当前的应用程序中直接设置。

比方说我正在看一篇小说，关灯之后，我想保护眼睛，就开启深色模式，此时，最好的方法应该是直接在当前阅读页面唤起深浅模式切换的开关来实现，而不应该让用户千里迢迢跑到系统设置里面去设置（网页没有开关系统设置的权限）。

也就是因为这个实际需求，才CSS才设计了一个名为color-scheme的属性，可以不依赖系统层面的设置，自定义深色还是浅色模式。

二、color-scheme属性简介

color-scheme属性可以改变网页上浏览器内置组件的配色。

要知道，如今的浏览器默认组件其实内置了深浅两套配色，color-scheme属性可以对其进行切换设置。

眼见为实，大家可以选择下面这个下拉框，切换配色方案，就可以看到表单控件样式的变化了：

最关键的代码就是下面这段：

选择深浅模式：<select onchange="document.body.style.colorScheme = this.value">
  <option value="light">浅色主题</option>
  <option value="dark">深色主题</option>
</select>

color-scheme的局限

color-scheme虽然可以设置深浅主题，但是只能改变浏览器内置的控件样式、选区样式等，实际开发肯定不是这个样子，你要进入深色配色，肯定是整体进入，而不是局部，否则你看下面这种样式效果，比小强粑粑还要丑！

怎么办？

使用prefers-color-scheme媒体查询匹配并进行针对性的设置！

等等！

你刚不是说prefers-color-scheme是鸡肋吗？

哎呀，你急什么急呢，我还没说完。

之前的使用指南确实是prefers-color-scheme进行匹配，虽然我也搞不懂为啥！明明是互相不影响的两个特性。

Component authors must use the prefers-color-scheme media feature to support the color schemes on the rest of the elements.

总而言之，就是在之前，关于颜色主题，CSS设计了不少东西，但就是不实用，还很麻烦，怎一个失败了得！

于是，还未放弃的规范制定者们又设计了一个新的CSS函数，没错，就是本文要介绍的light-dark()颜色函数。

三、细说 light-dark() CSS函数

color-scheme属性与light-dark()颜色函数配合，这才真正意义上把深浅配色的自定义能力完全抓在了开发者手中。

语法

/* 关键颜色值 */
light-dark(black, white);

/* RGB颜色值 */
light-dark(
  rgb(0 0 0),
  rgb(255 255 255)
);

/* 图片 */
light-dark(
  url("light-icon.png"),
  url("dark-icon.png")
);

/* 渐变图像 */
light-dark(
  linear-gradient(135deg, ghostwhite 20%, tomato),
  linear-gradient(45deg, darkslategray 20%, gold)
);

/* 自定义属性 */
light-dark(
  var(--light),
  var(--dark)
);

注意，虽然语法上显示支持图像类型，但是到目前为止，只有Firefox支持图像切换，大多数浏览器仅支持颜色设置。

案例

color-scheme与light-dark()才是真正意义上的黄金搭档。

color-scheme用来控制是深色还是浅色，light-dark()基于color-scheme的设置，选择应该渲染哪个颜色。

举个例子：

<section class="section">
  选择深浅模式：<select id="select" onchange="document.body.style.colorScheme = this.value">
    <option value="light">浅色主题</option>
    <option value="dark">深色主题</option>
  </select>
  <p>
    输入框：<input type="text">
    <textarea rows="3">
    滚动条
    滚动条
    滚动条
    滚动条
    滚动条
    </textarea>
  </p>
  选择框：<input type="radio"> <input type="checkbox">
</section>

外部<section>元素通过light-dark()函数设置了深浅配色，CSS如下所示：

.section {
  border:1px dashed light-dark(#ddd, transparent);
  background:light-dark(white, black);
  color: light-dark(black, white); 
  padding: 16px;
}

此时，当选择深色主题的时候，就会有如下所示的渲染效果，明显看起来舒服多了：

兼容性

light-dark()函数从2024年开始被各大浏览器支持，兼容性还算可以，在一些内部产品中已经可以大胆使用了。

四、再提一嘴prefers-contrast颜色查询

虽然light-dark()函数的语义是深浅主题切换，但是我们实际开发并不一定要朝着深浅方向走，只要是配色主题都可以使用。

例如，正常配色主题，和高对比度主题。

这就需要提一下prefers-contrast @media 查询语法了。

例如：

/* 如果是高对比度，采用dark配色渲染 */
@media (prefers-contrast: more) {
  :root {
    color-scheme: dark;
  }
}

很棒的用户体验增强处理，如果用户设置了设备是高对比度，那我们就是要dark模式。

只是，在国内，这类与用户体验细节密切相关的特性缺乏关注与市场，所以，我就不进一步展开介绍了，大家了解下有这么个东西就好了。

附上兼容性，还不错。

五、最后要不再扯点什么

今天有个同行拉我进了一个群，群名很有意思，叫做“前端夕阳群”，我就是看到这么群名才加入的。

一进群，就看到齐刷刷的“看我的博客成长”这样的言论，顿时内心一阵唏嘘。

他妈的时间过得可真快，一晃，入行都已经16年了，16年了啊，当年在出租屋闭关学习的场景还历历在目，在租住小区外面吃面见到一个倾心妹子迟迟不敢搭讪的经历也历历在目。

眼下早已没了当年一往无前，锐意进取的心态。

学也学习，输出也没停，工作依然积极，AI加持下，四个项目并行都不成问题，只是职业发展肉眼可见的到头，公司也是一直不温不火的，一颗改变世界的心也舍不得就这么算了，行业也不景气，人的心态也开始拧巴了。

目前就处在保持现状，走一步看一步的状态。

嗯，就先说这么多吧，下篇文章继续碎碎念吧。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12241

（本篇完）