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

成功： 此 Web 功能现已在三大主流浏览器引擎中推出，并于 2024 年 5 月 13 日成为新近纳入基准的功能。

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

Bramus

CSS 中的系统颜色

在 CSS 中，您可以使用众多色彩空间中的多种颜色。例如，您可以使用命名颜色、十六进制颜色码、与特定色彩空间关联的颜色函数，以及更通用的 color() 函数。

例如，命名颜色 cornflowerblue 也可以表示为 #6495ED、hsl(218.54deg 79.19% 66.08%) 或 color(display-p3 0.43 0.58 0.9)。

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

例如，系统颜色 Canvas（不要与 <canvas> 元素混淆）表示“应用内容或文档的背景”。它与 CanvasText（表示“应用内容或文档中的文本”）搭配得很好，也适合搭配使用。

在 CSS 中，您可以按如下方式使用它们：

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

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

这些系统颜色有一个隐藏功能，那就是它们可以响应 color-scheme 属性的计算值。例如，当使用的 color-scheme 为 dark 时，CanvasText 和 Canvas 的值会翻转。

: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()

Browser Support

• 123
• 123
• 120
• 17.5

Source

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

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

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

light-dark() 的结果是 <color>。它可以在 CSS 中任何接受 <color> 的地方使用。例如，在 color 和 background-color 属性中，以及在 linear-gradient() 等函数中。

在以下示例中，使用的 background-color 在深色模式下为 #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 设置为 dark 或 light，强制 DOM 的特定子树仅使用浅色或深色模式。在以下示例中，此设置应用于 :root。

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