blob: d2fe4d8723b10092c181b1f1b4a8b0910a5d292b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: color-scheme
slug: Web/CSS/color-scheme
tags:
- CSS
- CSS 颜色
- CSS 属性
- HTML 样式
- HTML 颜色
- 布局
- 参考
- 样式化 HTML
- 样式化 text
- Web
- color-adjust
- recipe:css-property
browser-compat: css.properties.color-scheme
---
{{CSSRef}}
**`color-scheme`** CSS 属性允许元素指示它可以轻松呈现的配色方案。
操作系统配色方案的常见选择是“亮”和“暗”，或者是“白天模式”和“夜间模式”。当用户选择其中一种配色方案时，操作系统会对用户界面进行调整。这包括表单控件、滚动条和 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`
- ：表示可以使用操作系统深色配色方案渲染元素。
## 正式定义
{{cssinfo}}
## 正式语法
{{csssyntax}}
## 示例
### 适应配色方案
要将整个页面配置为使用用户的配色方案首选项，请在 {{cssxref(":root")}} 元素上指定 `color-scheme` 。
```css
:root {
color-scheme: light dark;
}
```
## 规范
{{Specifications}}
## 浏览器兼容性
{{Compat}}
## 推荐阅读
- [使用 CSS 将颜色应用于 HTML 元素](/en-US/docs/Web/HTML/Applying_color)
- 其他与颜色相关的属性： {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
- {{cssxref("background-image")}}
- {{cssxref("-webkit-print-color-adjust")}}
|
