The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.

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

The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.

Common choices for operating system color schemes are "light" and "dark", or "day mode" and "night mode". When a user selects one of these color schemes, the operating system makes adjustments to the user interface. This includes form controls, scrollbars, and the used values of CSS system colors.

Syntax

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; 

The color-scheme property's value must be one of the following keywords.

Values

normal

Indicates that the element isn't aware of any color schemes, and so should be rendered using the browser's default color scheme.

light

Indicates that the element can be rendered using the operating system light color scheme.

dark

Indicates that the element can be rendered using the operating system dark color scheme.

Formal definition

Initial value	normal
Applies to	all elements and text
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

normal | [ light | dark | <custom-ident> ]+ && only?

Examples

Adapting to color schemes

To opt the entire page into the user's color scheme preferences declare color-scheme on the :root element.

:root {   color-scheme: light dark; } 

Specifications

Specification
CSS Color Adjustment Module Level 1 # color-scheme-prop

See also

Applying color to HTML elements using CSS Other color-related properties: color, background-color, border-color, outline-color, text-decoration-color, text-emphasis-color, text-shadow, caret-color, and column-rule-color background-image print-color-adjust

Last modified: Feb 1, 2022, by MDN contributors

Select your preferred language English (US)Français日本語中文 (简体) Change language