CSS color-scheme property

Definition and Usage

color-scheme The attribute indicates which operating system color scheme the element should use for rendering.

Common choices for operating system color schemes are "light" (light) and "dark" (dark), or "day mode" (daytime mode) and "night mode" (nighttime mode).

Example

Set the entire page to a dark color scheme:

:root {
  color-scheme: dark;

Try It Yourself

CSS Syntax

color-scheme: normal|light|dark|only light|only dark|light dark;

Attribute Value

Value Description
normal The element can be rendered using the default color scheme of the operating system
light The element can be rendered using the light color scheme of the operating system
dark The element can be rendered using the dark color scheme of the operating system
only light

The element should only be rendered using the light color scheme of the operating system.

Prevent the browser from overriding the color scheme of the element.
only dark

The element should only be rendered using the dark color scheme of the operating system.

Prevent the browser from overriding the color scheme of the element.
light dark The element can be rendered using the light or dark color scheme of the operating system (depending on the user's settings).

Technical Details

Default Value: normal
Inheritance: yes
Version: CSS Color Adjustment Module Level 1
JavaScript Syntax:

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome Edge Firefox Safari Opera
81 81 96 13 68