color-scheme
Quick Summary for color-scheme
color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
Code Usage for color-scheme
<pre class="brush: css notranslate"><code><span class="token property">color-scheme</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> light<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> light dark<span class="token punctuation">;</span> <span class="token comment">/ Global values /</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> initial<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> revert<span class="token punctuation">;</span> <span class="token property">color-scheme</span><span class="token punctuation">:</span> unset<span class="token punctuation">;</span> </code></pre>
More Details for color-scheme
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 languageAdd Comment
Other Items in CSS
Related Search Terms
Other Categories in CSS
