此页面由 Cloud Translation API 翻译。

通过配色方案 CSS 属性和相应的元标记改进了深色模式默认样式

借助 color-scheme CSS 属性和相应的元标记，开发者可以选择让其网页采用用户代理样式表的主题专用默认设置。

Thomas Steiner

背景

`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”。）样式表提供的默认值会根据深色模式的开启或关闭状态而发生变化。为说明这一点，下面是一个使用 :matches 伪类和 WebKit 内部变量（例如 -apple-system-control-background）以及 WebKit 内部预处理器指令 #if defined 的 CSS 规则示例：

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 表示相反的配色方案，具有深色背景和浅色前景颜色。

对于所有元素，使用配色方案进行渲染应会导致浏览器为元素提供的所有界面中使用的颜色与配色方案的意图相匹配。示例包括滚动条、拼写检查下划线、表单控件等。

注意：color-scheme CSS 属性既可在 :root 级别使用，也可用于单个元素级别。

在 :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 属性，必须先下载（如果是通过 <link rel="stylesheet"> 引用）并解析 CSS。为了帮助用户代理立即使用所需的配色方案渲染页面背景，您还可以在 <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 系统颜色。

使用 ButtonFace 属性的浅色模式页面。 — **浅色模式**：`background-color` 和各种 `border-color` 均设为 ButtonFace 系统颜色。

现在，请注意 <button> 元素的 border-color 如何变化。 border-top-color 和 border-bottom-color 的 computed 值从 rgba(0, 0, 0, 0.847)（黑色）切换为 rgba(255, 255, 255, 0.847)（白色），因为用户代理根据配色方案动态更新 ButtonFace。这同样适用于设置为相应系统颜色 ButtonText 的 <button> 元素的 color。

显示计算出的颜色值与 ButtonFace 匹配。 — **浅色模式**：在用户代理样式表中，`border-top-color` 和 `border-bottom-color` 均设为 `ButtonFace`，其计算值现已变为 `rgba(0, 0, 0, 0.847)`。

显示在深色模式下，计算的颜色值仍与 ButtonFace 匹配。 — **深色模式**：在用户代理样式表中，`border-top-color` 和 `border-bottom-color` 均设为 `ButtonFace`，其计算值现已变为 `rgba(255, 255, 255, 0.847)`。

演示

您可以在 Glitch 上的演示中查看将 color-scheme 应用于大量 HTML 元素的效果。该演示故意显示了 WCAG AA 和 WCAG AAA 违规情况，并使用了上述警告中提及的链接颜色。

深色模式下的演示。 — 演示切换为 `color-scheme: dark`。请注意链接颜色的 WCAG AA 和 WCAG AAA 违规行为。

致谢

color-scheme CSS 属性和相应的元标记由 Rune Lillesveen 实现。Rune 还是 CSS 颜色调整模块级别 1 规范的共同编辑者。主打图片由 Unsplash 用户 Philippe Leone 提供。

通过配色方案 CSS 属性和相应的元标记改进了深色模式默认样式

背景

prefers-color-scheme 用户偏好媒体功能

浏览器支持

prefers-color-scheme

color-scheme

用户代理样式表

color-scheme CSS 属性

color-scheme 元标记

组合使用 color-scheme 和 prefers-color-scheme

与 prefers-color-scheme 互动

演示

致谢

`prefers-color-scheme` 用户偏好媒体功能

`prefers-color-scheme`

`color-scheme`

`color-scheme` CSS 属性

`color-scheme` 元标记

组合使用 `color-scheme` 和 `prefers-color-scheme`

与 `prefers-color-scheme` 互动