Color-scheme - Property CSS

color-scheme

Summary of characteristics of the color-scheme property

Quick description
Defines whether an element should be displayed in dark mode or light mode. These two modes are generally supported by all operating systems.
Status
Standard
Usable for
HTML
Predefined values
normal | dark | light | only dark | only light
Percentages
Not applicable.
Initial value
normal
Inherited by default
Yes.
Animation type
Discrète: during an animation, the color-scheme property passes from one value to another without transition.
W3C Module
CSS Color Adjustment Module
References (W3C)
Document status: CR (Candidate Recommendation)

Syntax diagram of color-scheme..

color-scheme - Syntax DiagramSyntax diagram of the color-scheme CSS property. normal normal light light dark dark only light only light only dark only darkcolor-scheme:;color-scheme:;
Syntax diagram of the color-scheme property..
The links in the diagram provide more details about the values.

Description of the color-scheme property.

The property color-scheme switches from a light display to a dark display or vice versa.

Most operating systems use at least one display in light mode, also called day mode, and one display in dark mode, also called night mode. On a mobile phone, switching to dark mode is generally automatic. On a desktop computer, the user can choose the mode with color-scheme.

In dark mode, the browser adjusts the colors of form controls, scroll bars, etc.

The property color-scheme can be applied to the source of the page (selector :root): a single declaration is enough to switch all the elements to a given mode. But it is entirely possible to apply it to elements, especially if they are form controls.

Refer also to the function light-dark() to see how to set the colors corresponding to each color palette.

Values for color-scheme.

  • color-scheme: normal;

    The element is displayed regardless of the currently chosen color palette.



  • color-scheme: dark;

    The element is always displayed in dark mode.



  • color-scheme: light;

    The element always appears in light mode.



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

    It is forbidden for the browser to change the colors for this element. Below, the checkbox and radio buttons are set to only light.



  • color-scheme: initial; (normal) color-scheme: inherit; color-scheme: revert; color-scheme: revertLayer; color-scheme: unset;

    Common values ​​are presented on these pages: initial, inherit, revert, revert-layer, unset.

Animation of the color-scheme property.

The property color-scheme can be animated discreetly, meaning that the transition from one value to another occurs abruptly, without any transition. To make the demo more illustrative, we had to use the function light-dark() .

Simulator.

The simulator features some form controls (checkboxes, text area, etc.) as these are the components most sensitive to changes in color schemes. The options below affect these components. We also find the buttons Light and Dark that affect the entire page.

color-scheme :








Browsers compatibility with color-scheme.

Column 1
Support for the color-scheme property allowing the selection of the color scheme for the display (night mode ou day mode).
1
color-scheme
property
Estimated overall support.
94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari

Opéra

Safari sur IOS

Firefox pour Androïd

Chrome

Firefox

Edge

Chrome pour Androïd

Androïd Brower

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse

Historic of the color-scheme property.

See also, regarding color adjustment.

The CSS specifications published by the W3C are organized into modules. The property color-scheme is part of the CSS Color Adjustment Module, in which you will also find the following definitions.

Properties:

✗
color-adjust
Whether or not allows the browser to optimize colors.
⚠
forced-color-adjust
Defines how colors are adjusted.
print-color-adjust
Specifies whether the browser should optimize colors when printing the document.

Functions:

light-dark()
Langue française
Allows you to choose between two colors to adapt the appearance of an element to the color sheme used (light or dark).