系统颜色能够对当前使用的 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
时,表示此元素支持深色配色方案。
隆重推出 light-dark()
到目前为止,响应所使用的 color-scheme
值是为系统颜色保留的。得益于 CSS 颜色模块级别 5 中指定的 light-dark()
,您现在也拥有相同的功能。
light-dark()
是一个接受两个参数的函数,这两个参数都必须是 <color>
。系统会根据所使用的配色方案选择其中一种。
- 如果使用的配色方案为
light
或未知,则会返回第一个值的计算值。 - 如果使用的配色方案为
dark
,则返回第二种颜色的计算值。
light-dark()
的结果是 <color>
。它可用于 CSS 中任何接受 <color>
的位置。例如,在 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;
}
}
借助 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);
}
另一个好处是,将 color-scheme
设置为 dark
或 light
,可以强制 DOM 的某个子树仅使用浅色模式或深色模式。在以下示例中,这将应用于 :root
。