color-scheme

color-scheme CSS 属性允许元素指示它可以轻松呈现的配色方案。

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

语法

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

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

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

Values

  • normal
    • ：表示元素未指定任何配色方案，因此应使用浏览器的默认配色方案呈现。
  • light
    • ：表示可以使用操作系统亮色配色方案渲染元素。
  • dark
    • ：表示可以使用操作系统深色配色方案渲染元素。

正式定义

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

正式语法

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

示例

适应配色方案

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

:root {
  color-scheme: light dark;
}

规范

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

浏览器兼容性

BCD tables only load in the browser

推荐阅读