W3cubDocs

/CSS

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.

Try it

Syntax

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

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
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.

only

Forbids the user agent from overriding the color scheme for the element.

Can be used to turn off color overrides caused by Chrome's Auto Dark Theme, by applying color-scheme: only light; on a specific element or :root.

Formal definition

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

Formal syntax

color-scheme = 
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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
color-scheme 81 81 96 No 68 13 81 81 96 58 13 13.0
only_dark No No No No No 13 No No No No 13 No
only_light 81–85 81–85 No No 68–71 13 No 81–85 No 58–60 13 13.0–14.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme