color-scheme CSS 属性允许元素指示它可以舒适地呈现哪些颜色方案。

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

{{InteractiveExample("CSS Demo: color-scheme")}}

```css interactive-example-choice color-scheme: normal;

```css interactive-example-choice
color-scheme: dark;

```css interactive-example-choice color-scheme: light;

```html interactive-example
<section class="default-example container" id="default-example">
  <textarea id="example-element">Text Area</textarea>
</section>

```css interactive-example

example-element {

width: 80%; height: 50%; }

## 语法

```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 的自动深色主题引起的颜色覆盖。

形式定义

{{cssinfo}}

形式语法

{{csssyntax}}

示例

应用配色方案

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

:root {
  color-scheme: light dark;
}