color-scheme

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2022.

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
适用元素所有元素和文本
是否是继承属性
计算值as specified
动画类型离散值

形式语法

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
color-scheme
dark
light
normal
only dark keyword
only light keyword

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Has more compatibility info.

参见