颜色方案 | CSS-Tricks

CSS 年鉴 → 属性 → C → color-scheme

Geoff Graham 于 2023年1月27日

您知道我们现在有 “深色模式”和“浅色模式” 吗？浏览器在其默认样式中也内置了“深色”和“浅色”颜色方案。 CSS color-scheme 属性允许浏览器使用（或选择）使用其深色或浅色默认样式来显示某些元素。

:root {
  color-scheme: light dark;
}

color-scheme 属性在 CSS 颜色调整模块级别 1 规范中定义，在该规范中它被称为“选择首选颜色方案”属性。

这是一个非常好的名字，因为它设置它可以使浏览器的 light 和 dark 颜色方案在识别用户的系统偏好时生效。如果用户偏好浅色，他们将获得浏览器的 light 颜色方案。偏好深色？他们将改为获得 dark 颜色方案。

可以将其视为向浏览器提供有关页面主要颜色的提示。如果主要颜色为 light（例如白色背景），则元素的默认颜色最好具有较深的对比度。如果主要颜色为 dark，则元素最好具有较浅的外观。

并且一旦浏览器获得提示，它就会自动从其样式表中应用相应的 color-scheme，而无需我们编写其他样式或媒体查询。

在撰写本文时，**CSS 颜色调整模块级别 1 规范**目前处于编辑草案状态。这意味着该功能在规范成为候选推荐之前可能会发生变化。浏览器可能会在此时和那时之间实现该功能，但该功能仍被视为实验性的。

语法

color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?

初始值：normal
应用于：所有元素和文本
继承：是
百分比：n/a
计算值：如指定
动画类型：离散

color-scheme CSS 属性可以应用于 :root 元素，以便全局继承，也可以在单个元素上设置。

值

/* Keyword values */
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: dark light;
color-scheme: only light;
color-scheme: only dark;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

`normal`

此值可防止元素选择操作系统的光线和黑暗颜色方案。相反，将使用浏览器的默认颜色方案。

这可以用来重置元素的继承颜色方案。假设您在 :root 元素上设置 color-scheme

:root {
  color-scheme: dark;
}

所有元素都继承该样式。如果我们希望特定元素退出该样式，这就是 normal 将事物恢复到浏览器默认设置的地方。

:root {
  color-scheme: dark;
}

.some-element {
  color-scheme: normal;
}

`light`

此值使元素选择操作系统的浅色颜色方案。

`dark`

此值使元素选择操作系统的深色颜色方案。

`only`

此值与 light 或 dark 值一起使用

:root {
  color-scheme: only light;
}

当我们这样做时，我们告诉浏览器仅选择浅色颜色方案或仅选择深色颜色方案的元素。因此，如果我们在元素上设置 color-scheme: only light，则该元素可以接收操作系统的浅色颜色方案，但不能使用其深色颜色方案……反之亦然。

同时启用亮色和暗色配色方案

我们完全可以做到这一点。

/* Light and dark color schemes are supported,
   but `light` is my preferred option. */
:root {
  color-scheme: light dark;
}

请注意，顺序很重要。因此，即使某个元素同时启用了两种配色方案，第一个设置的方案将优先使用。在 :root 上设置这两个值是确保所有元素都支持配色方案，同时偏向其中一个方案的好方法。

确切的颜色由浏览器决定

浏览器包含自己的样式表。我们称之为用户代理样式（这只是“浏览器”的另一种说法）。让我们来看一下 WebKit 样式表中的一个 CSS。

a:any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
}

看到那个 -webkit-link 颜色了吗？这是一种只有 WebKit 识别的命名颜色，它默认将该颜色应用于所有链接，除非我们用自己的 CSS 覆盖它。因此，当像 WebKit 这样的渲染引擎看到我们在某个元素上设置了 color-scheme: light 或 color-scheme: dark 时，它会决定哪种版本的颜色最适合这种情况。

规范对此进行了详细说明。

亮色和暗色配色方案不是特定的调色板。例如，鲜明的黑白方案和棕褐色的深色方案都将被视为亮色方案。要确保特定的前景或背景颜色，需要显式指定它们。

但有时颜色由用户决定

操作系统通常允许用户使用首选配色方案覆盖其系统颜色。

macOS system preferences open to appearance settings. — 除了选择“亮色”、“暗色”或“自动”配色方案外，macOS 还允许用户更改系统的“强调色”和“高亮色”。

当浏览器在某个元素上看到声明的 color-scheme 时，就会检查这些首选项。如果用户从这些首选项中选择颜色，则浏览器的默认样式将尊重这些操作系统设置。

还有一个对应的 `<meta>` 标签

通过在网页的 HTML 中的 <head> 中添加 <meta name="color-scheme"> 标签，我们可以获得相同的好处。

<head>
  <meta name="color-scheme" content="dark light">
</head>

无需在 HTML 和 CSS 中都指定配色方案，但在某些情况下，您的样式表由于某种原因无法加载，这可能会很方便。这样，即使 CSS 不可用，页面仍然启用了两种配色方案。

如果您试图在 HTML 元标签和 CSS 属性之间进行选择，您可能会倾向于 HTML。HTML 立即可用。另一方面，CSS 方法需要下载样式表才能应用该属性，并且执行此操作所需的时间可能会导致轻微的错误颜色主题闪烁。

`color-scheme` 全都与默认外观有关

因此，页面上具有用户代理样式表默认颜色的元素（例如表单控件的 background-color 和文本的 color）会根据 color-scheme 值进行更新。Apple 在其 “在 Web 内容中支持暗黑模式”视频中对此进行了很好的解释。

[color-scheme] 将页面的默认文本和背景颜色更改为与当前系统外观匹配，标准表单控件、滚动条和其他命名系统颜色也会自动更改其外观。

我们可以通过一个快速而简陋的演示来查看这一点，在这个演示中我们只处理三个元素。

文档 :root、
一个 <h1> 元素和
一个 <button>。

请注意，演示没有在元素上设置任何颜色。我已将 :root 设置为亮色配色方案，因此它将默认渲染。点击按钮将 :root 设置为 dark。

从 light 切换到 dark 后，发生了什么变化？

文档的 background-color 从白色变为黑色。
标题 1 的 color 从黑色变为白色。
按钮的 color 也从黑色变为白色。
按钮的 background-color 更改了色调。

如果我们打开 DevTools，我们可以看到标题 1 的 color 来自用户代理样式表，并具有 text 值。

DevTools window with the Heading 1 element selected.

老实说，我不确定 text 实际映射到什么颜色。但是，如果我们切换到“计算”选项卡，我们会看到它是黑色（rgb(0, 0, 0)）。

DevTools open showing the computed Heading 1 styles. — 当 `color-scheme` 设置为 `light` 时，`text` 值将映射到 `rgb(0, 0, 0)` 的颜色。

当我们将 color-scheme 属性从 light 切换到 dark 时，该计算值将更改为白色（rgb(255, 255, 255)）。

这些颜色从未在我的编写的样式中设置过——它们来自浏览器的样式表。而 color-scheme 属性控制着它们。

`color-scheme` 与 `prefers-color-scheme` 不同

这两个很容易混淆。毕竟它们都接受相同的 light 和 dark 值！

区别是什么？同样地，color-scheme 完全关乎于**默认外观**。它告诉浏览器更新其样式表中的颜色。

与此同时，prefers-color-scheme 完全关乎于应用我们在我们自己的样式表中编写的样式，并且仅在满足该条件时应用。换句话说，我们在媒体查询内编写的任何样式规则都会应用——它与浏览器的默认样式无关。

让我们重新审视我们上一个示例，在该示例中，我们更改了一个包含:root 文档、标题和按钮的页面的color-scheme。默认情况下，我没有更改任何颜色，但我确实声明了color-scheme: light。这意味着所有颜色都来自浏览器的样式表。

:root {
  color-scheme: light;
}

当我们将其更改为

:root {
  color-scheme: dark;
}

…来自浏览器样式表的所有这些默认颜色都发生了变化。无需媒体查询！

现在假设我们从未声明过color-scheme。我们将使用prefers-color-scheme媒体查询来自己更改这些颜色。以下是一个简化的示例，它更改了:root元素的background-color和color

:root {
  background-color: white;
  color: black;
}

/* If user prefers a dark appearance */
@media (prefers-color-scheme: dark) {
  :root {
    background-color: black;
    color: white;
  }
}

只有当用户的操作系统外观设置为“暗色”时，才会应用媒体查询。

macOS system preferences open to appearance settings with Dark mode selected.

如果该条件匹配，我们放在那里的任何样式都会应用——我们不仅限于浏览器的默认颜色和样式。例如，当prefers-color-scheme: dark时，让我们将background-color和color更改为完全不同的颜色。

一起使用`color-scheme`和`prefers-color-scheme`

事实是，最好将两者结合使用。为什么？它们执行不同的操作，但可以很好地互补。我们可以使用prefers-color-scheme创建世界上最漂亮的暗模式界面，但某些元素（如表单控件和滚动条）在没有覆盖一堆默认浏览器样式的情况下，我们无法控制它们。当我们将两者结合使用时，我们获得了一种无需额外开销即可轻松切换这些默认值的方法。

浏览器支持

只要您使用light和dark值，CSS color-scheme属性的支持就非常可靠。在撰写本文时，许多浏览器都缺乏对only关键字的支持，Safari是唯一的例外。

桌面浏览器	IE	Edge	Chrome	Firefox	Safari	Opera
`color-scheme`	不支持	81+	81+	96+	13+	68+
关键字：`only dark`	不支持	不支持	不支持	不支持	13+	不支持
关键字：`only light`	不支持	不支持	不支持	不支持	13+	不支持

移动浏览器	Safari iOS	Chrome Android	Firefox Android	Android浏览器	Opera Mobile
`color-scheme`	13+	108+	107+	108+	72+
关键字：`only light`	13+	不支持	不支持	不支持	不支持
关键字：`only dark`	13+	不支持	不支持	不支持	不支持