系统颜色能够响应当前使用的 color-scheme 值。light-dark() 函数向作者公开了相同的功能。
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（表示“应用内容或文档中的文本”）很好地搭配使用，也可以与 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()
到目前为止，对所用的 color-scheme 值作出反应是系统颜色预留的东西。现在，借助 CSS 颜色模块级别 5 中指定的 light-dark()，您还可以实现相同的功能。
light-dark() 是接受两个参数的函数，且这两个参数都必须为 <color>。系统会根据使用的配色方案选择其中一种。
- 如果所用配色方案为
light或未知，则返回第一个值的计算值。 - 如果使用的配色方案为
dark，则返回第二种颜色的计算值。
light-dark() 的结果为 <color>。它可在接受 <color> 的 CSS 中使用。例如，在 color 和 background-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 设置为 dark 或 light 来强制 DOM 的某个子树仅使用浅色模式或深色模式。在以下示例中，这应用于 :root。
prefers-color-scheme 响应浅色或深色模式的网页。可通过
light-dark() 更改颜色值。使用其中一个选项，您可以强制采用浅色或深色模式。这通过操控
color-scheme 值来实现。