translate(zh-CN): Web/CSS/color-scheme (#2580)

1 files changed, 85 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/color-scheme/index.md b/files/zh-cn/web/css/color-scheme/index.md
new file mode 100644
index 0000000000..d2fe4d8723
--- /dev/null
+++ b/files/zh-cn/web/css/color-scheme/index.md
@@ -0,0 +1,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")}}