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
- :表示可以使用操作系统深色配色方案渲染元素。
正式定义
正式语法
示例
适应配色方案
要将整个页面配置为使用用户的配色方案首选项,请在 :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