color-scheme

基线 广泛可用

此功能非常成熟，可在许多设备和浏览器版本上运行。自 2022 年 2 月.

**color-scheme** CSS 属性允许元素指示它可以在哪些颜色方案中舒适地呈现。

操作系统颜色方案的常见选择是“浅色”和“深色”，或“白天模式”和“夜间模式”。当用户选择其中一个颜色方案时，操作系统会对用户界面进行调整。这包括 表单控件、滚动条 以及 CSS 系统颜色 的使用值。

试试看

语法

css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

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

color-scheme 属性的值必须是以下关键字之一。

值

normal

表示元素不知道任何颜色方案，因此应使用浏览器的默认颜色方案进行渲染。

light

表示元素可以使用操作系统浅色方案进行渲染。

dark

表示元素可以使用操作系统深色方案进行渲染。

only

禁止用户代理覆盖元素的颜色方案。

可用于关闭由 Chrome 的 自动深色主题 导致的颜色覆盖，方法是在特定元素或 :root 上应用 color-scheme: only light;。

正式定义

初始值normal
适用于所有元素和文本
继承是
计算值如指定
动画类型离散

正式语法

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

示例

声明颜色方案偏好

要将整个页面选择到用户的颜色方案偏好，请在 :root 元素上声明 color-scheme。

css
:root {
  color-scheme: light dark;
}

要将特定元素选择到用户的颜色方案偏好，请在这些元素上声明 color-scheme。

css
header {
  color-scheme: only light;
}
main {
  color-scheme: light dark;
}
footer {
  color-scheme: only dark;
}

基于颜色方案的样式化

要根据颜色方案偏好对元素进行样式化，请使用 prefers-color-scheme 媒体查询。下面的示例通过 color-scheme 属性将整个页面选择到使用浅色和深色操作系统颜色方案，然后使用 prefers-color-scheme 为这些颜色方案中各个元素指定所需的前景色和背景色。

css
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: light) {
  .element {
    color: black;
    background-color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .element {
    color: white;
    background-color: black;
  }
}

或者，使用实验性的 light-dark() <color> 函数 来设置使用更紧凑的代码结构的不同颜色方案的前景色和背景色

css
:root {
  color-scheme: light dark;
}

.element {
  color: light-dark(black, white);
  background-color: light-dark(white, black);
}

规范

规范
CSS 颜色调整模块级别 1
# color-scheme-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅