color-scheme

Baseline 2022

Newly available

Since February 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

操作系统颜色方案的常见选择为“亮色”和“暗色”，或“日间模式”和“夜间模式”。当用户选择其中一种颜色方案时，操作系统会对用户界面进行调整，包括表单控件、滚动条和 CSS 系统颜色的使用值。

尝试一下

语法

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

/* 全局值 */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

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

取值

normal

表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。

light

表示可以使用操作系统亮色配色方案渲染元素。

dark

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

only

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

可以使用 color-scheme: only light; 应用于特定的元素或 :root，以关闭由 Chrome 的自动深色主题引起的颜色覆盖。

形式定义

初始值normal
适用元素all elements and text
是否是继承属性yes
计算值as specified
Animation typediscrete

形式语法

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

示例

应用配色方案

要将整个页面配置为使用用户的配色方案首选项，请在 :root 元素上指定 color-scheme。

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

规范

Specification
CSS Color Adjustment Module Level 1
# color-scheme-prop

浏览器兼容性

BCD tables only load in the browser

参见