借助 color-scheme CSS 属性和相应的元标记，开发者可以为自己的网页选择启用用户代理样式表的特定主题默认设置。
背景
prefers-color-scheme 用户偏好设置媒体功能
借助 prefers-color-scheme 用户偏好设置媒体功能，开发者能够完全控制其页面的外观。如果您对此不熟悉，请参阅我的文章：prefers-color-scheme：你好，黑暗，我的老朋友，其中我记录了我所知道的关于打造令人惊叹的深色模式体验的一切知识。
这篇文章中只是简要提及了一部分谜题，那就是 color-scheme CSS 属性和对应的同名元标记。两者都可让您的网页采用用户代理样式表中特定于主题的默认设置（例如，表单控件、滚动条以及 CSS 系统颜色），从而简化开发者工作。同时，此功能可防止浏览器自行应用任何转换。
浏览器支持
prefers-color-scheme
color-scheme
用户代理样式表
在继续之前，我先简要介绍一下什么是用户代理样式表。大多数情况下，您可以将“用户代理”(UA) 视为“浏览器”的另一种说法。UA 样式表决定了网页的默认外观和风格。顾名思义，UA 样式表依赖于相关的 UA。 您可以查看 Chrome（和 Chromium）的 UA 样式表，并将其与 Firefox 或 Safari（和 WebKit）的 UA 样式表进行比较。通常情况下，UA 样式表在大多数方面达成一致。例如，它们都将链接设为蓝色，将一般文本设为黑色，将背景颜色设为白色，但还存在一些重要（有时还很烦人）差异，例如它们的表单控件样式设置方式。
您可以详细了解一下 WebKit 的 UA 样式表及其对深色模式的影响。（在样式表中针对“dark”进行全文搜索。）
样式表提供的默认值取决于深色模式是开启还是关闭。为说明这一点，下面是一条此类 CSS 规则，它使用 :matches 伪类和 WebKit 内部变量（如 -apple-system-control-background）以及 WebKit 内部预处理器指令 #if defined：
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
您会发现上面的 color 和 background-color 属性有一些非标准值。
text 和 -apple-system-control-background 都不是有效的 CSS 颜色。它们是 WebKit 内部语义颜色。
事实证明，CSS 采用了标准化的语义系统颜色。它们在 CSS 颜色模块级别 4 中指定。例如，Canvas（不要与 <canvas> 标记混淆）表示应用内容或文档的背景，而 CanvasText 表示应用内容或文档中的文本。这两种方式会搭配使用，不应单独使用。
UA 样式表可以使用自己的专有颜色或标准化语义系统颜色来确定 HTML 元素的默认呈现方式。如果操作系统设置为深色模式或使用深色主题，则系统会有条件地将 CanvasText（或 text）设置为白色，并将 Canvas（或 -apple-system-control-background）设置为黑色。然后，UA 样式表只分配以下 CSS 一次，并涵盖浅色模式和深色模式。
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
color-scheme CSS 属性
CSS 颜色调整模块第 1 级规范引入了一个模型，可控制用户代理的自动颜色调整，以处理用户偏好，例如深色模式、对比度调整或特定的所需配色方案。
利用其中定义的 color-scheme 属性，元素可以指明它适合呈现的配色方案。这些值将与用户的偏好设置进行协商，从而产生会影响界面 (UI) 的所选配色方案，例如表单控件和滚动条的默认颜色，以及 CSS 系统颜色所使用的值。目前支持以下值：
normal：表示元素完全不知道配色方案，因此该元素应使用浏览器的默认配色方案进行渲染。[ light | dark ]+表示元素知晓并可以处理列出的配色方案，并在这些方案之间表示有序的偏好设置。
在此列表中，light 表示浅色配色方案，具有浅色背景颜色和深色前景颜色，而 dark 表示相反，即深色背景颜色和浅色前景颜色。
对于所有元素，使用配色方案进行渲染时，应使浏览器在为该元素提供的所有界面中使用的颜色与配色方案的意图保持一致。例如滚动条、拼写检查下划线、表单控件等。
在 :root 元素上，使用配色方案进行渲染还必须影响画布的 Surface 颜色（即全局背景颜色）、color 属性的初始值以及所使用的系统颜色值，并且还应影响视口的滚动条。
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
color-scheme 元标记
遵循 color-scheme CSS 属性需要首先下载相应 CSS（如果通过 <link rel="stylesheet"> 引用它）并对其进行解析。为了帮助用户代理立即以所需的配色方案呈现网页背景，您还可以在 <meta name="color-scheme"> 元素中提供 color-scheme 值。
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
结合使用 color-scheme 和 prefers-color-scheme
由于元标记和 CSS 属性（如果应用于 :root 元素）最终会产生相同的行为，因此我始终建议通过元标记指定配色方案，以便浏览器可以更快地采用首选方案。
虽然对于绝对基准网页，不需要额外的 CSS 规则，但一般情况下，您应始终将 color-scheme 与 prefers-color-scheme 结合使用。例如，WebKit 和 Chrome 用于经典链接蓝色 rgb(0,0,238) 的专有 WebKit CSS 颜色 -webkit-link 在黑色背景上的对比度不足 2.23:1，并且无法满足 WCAG AA 和 WCAG AAA 要求。
我已针对 Chrome、WebKit 和 Firefox 报告了 bug，并发现了 HTML 标准中的元问题来修复此问题。
与prefers-color-scheme互动
color-scheme CSS 属性以及相应元标记与 prefers-color-scheme 用户偏好设置媒体功能之间的相互作用乍看起来可能会令人困惑。事实上，它们配合得非常不错。
最重要的一点是，color-scheme 专门决定默认外观，而 prefers-color-scheme 决定样式化的外观。为清楚起见，我们在下面假设存在以下页面：
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
通常情况下，网页上的内嵌 CSS 代码会将 <fieldset> 元素的 background-color 设置为 gainsboro；如果用户根据 prefers-color-scheme 用户偏好设置媒体功能偏好的 dark 配色方案，则将其设置为 darkslategray。
通过 <meta name="color-scheme" content="dark light"> 元素，页面告知浏览器它支持深色主题和浅色主题，并优先采用深色主题。
根据用户代理样式表，整个页面在深色显示时采用浅色模式，反之亦然，具体取决于操作系统设置为深色模式还是浅色模式。 更改页面的段落文本或背景颜色时，不需要使用开发者提供的其他 CSS。
请注意，遵循页面上由开发者提供的内嵌样式表中的规则，<fieldset> 元素的 background-color 如何根据是否启用深色模式而变化。
可为 gainsboro 或 darkslategray。
<fieldset> 元素的 background-color 为 gainsboro。
<fieldset> 元素的 background-color 为 darkslategray。
<button> 元素的外观由用户代理样式表控制。它的 color 被设置为 ButtonText 系统颜色，其 background-color 和四个 border-color 被设置为系统颜色 ButtonFace。
background-color 和各种 border-color 都设置为 ButtonFace 系统颜色。
现在，请注意 <button> 元素的 border-color 是如何变化的。border-top-color 和 border-bottom-color 的计算值会从 rgba(0, 0, 0, 0.847)（黑色）变为 rgba(255, 255, 255, 0.847)（白色），因为用户代理会根据配色方案动态更新 ButtonFace。这同样适用于设置为相应系统颜色 ButtonText 的 <button> 元素的 color。
ButtonFace 的 border-top-color 和 border-bottom-color 的计算值现在为 rgba(0, 0, 0, 0.847)。
ButtonFace 的 border-top-color 和 border-bottom-color 的计算值现在为 rgba(255, 255, 255, 0.847)。
演示
您可以在 Glitch 演示中了解将 color-scheme 应用于大量 HTML 元素的效果。该演示刻意通过上述警告中提到的链接颜色来展示 WCAG AA 和 WCAG AAA 违规行为。
color-scheme: light。
color-scheme: dark。
请注意链接颜色的 WCAG AA 和 WCAG AAA
违规行为
。
致谢
color-scheme CSS 属性和相应的元标记由 Rune Lillesveen 实现。此外，Rune 还是《CSS 颜色调整模块第 1 级》规范的共同编辑者。主打图片，由 Philippe Leone 在 Unsplash 用户获取。