使用 light-dark() 的 CSS 配色方案相关颜色

系统颜色能够对当前使用的 color-scheme 值做出响应。light-dark() 函数会向作者公开相同的功能。

在 CSS 中,您可以使用众多颜色空间中的任意一个颜色空间中的许多颜色。例如,您可以使用命名颜色、十六进制颜色、与特定颜色空间关联的颜色函数,以及更通用的 color() 函数。

例如,命名颜色 cornflowerblue 也可以表示为 #6495EDhsl(218.54deg 79.19% 66.08%)color(display-p3 0.43 0.58 0.9)

除了这些不同的名称和格式之外,CSS 还包含 CSS 颜色模块级别 4 中指定的系统颜色。这些系统颜色是由浏览器定义的颜色,并由关键字表示。

例如,系统颜色 Canvas(请勿与 <canvas> 元素混淆)表示“应用内容或文档的背景”。它与 CanvasText 搭配使用效果非常理想,也应与 CanvasText 搭配使用,后者表示“应用内容或文档中的文本”。

在 CSS 中,您可以按如下方式使用它们:

body {
  color: CanvasText;
  background-color: Canvas;
}

默认情况下,CanvasText 会产生接近 black 的颜色,Canvas 会产生接近 white 的颜色。具体实现取决于浏览器。例如,Chrome 中的 CanvasText 会显示为 #121212,而 Safari 会将其指定为略浅的 #1e1e1e

这些系统颜色的隐藏功能在于,它们可以响应 color-scheme 属性的计算值。例如,当使用的 color-schemedark 时,CanvasTextCanvas 的值会互换。

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

在以下演示中,您可以更改在 :root 上设置的 color-scheme 的值,并查看页面的响应方式。

  • 设置为 light dark 表示元素同时支持浅色模式和深色模式。具体选择哪个值取决于 prefers-color-scheme 媒体条件的值。
  • 如果设置为 light,则表示元素支持浅色配色方案。
  • 设置为 dark 表示元素支持深色配色方案。
一个页面,您可以在其中更改 color-scheme 的值。更改后,页面颜色会从浅色变为深色或反之,即使 body 元素上的声明保持不变也是如此。

隆重推出 light-dark()

浏览器支持

  • Chrome:123。
  • Edge:123。
  • Firefox:120.
  • Safari:17.5。

来源

到目前为止,对所用 color-scheme 值做出响应是系统颜色专有的功能。得益于 CSS 颜色模块级别 5 中指定的 light-dark(),您现在也可以使用相同的功能。

light-dark() 是一个接受两个参数的函数,这两个参数都必须是 <color>。系统会根据所使用的配色方案选择其中一种。

  • 如果使用的配色方案为 light 或未知,则会返回第一个值的计算值。
  • 如果使用的配色方案为 dark,则返回第二种颜色的计算值。

light-dark() 的结果为 <color>。它可在 CSS 中接受 <color> 的任何位置使用。例如,在 colorbackground-color 属性中,但也适用于 linear-gradient() 等函数。

在以下示例中,深色模式下使用的背景颜色为 #333,浅色模式(或未知模式)下使用的背景颜色为 #ccc

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

请注意,为了使 light-dark() 正常运行,您需要指定 color-scheme。由于该属性会继承,因此您通常在 :root 上设置它,但如果需要,也可以选择在特定元素上设置它。

实际应用

在以下示例中,一些自定义属性代表了网页上的颜色。为了适应深色模式,这些自定义属性的值会被 prefers-color-scheme 媒体条件中的其他值覆盖。

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}
通过 prefers-color-scheme 响应浅色或深色模式的页面。
颜色值是使用媒体查询在 CSS 中更改的。

借助 light-dark(),此代码可以简化。由于 color-scheme:root 上设置为 light dark,因此当您将操作系统从浅色模式更改为深色模式(或反之)时,这些颜色的值会自动更改。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}
使用 prefers-color-scheme 响应浅色或深色模式的页面。
颜色值使用 light-dark() 进行更改。

此外,您还可以通过将 color-scheme 设置为 darklight,强制 DOM 的某个子树仅使用浅色或深色模式。在以下示例中,此操作会应用于 :root

使用 prefers-color-scheme 响应浅色或深色模式的页面。
颜色值使用 light-dark() 进行更改。
您可以使用其中一个选项强制使用浅色或深色模式。这可以通过操控 color-scheme 值来实现。