Baseline Widely available
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. User agents change the following aspects of the UI chrome to match the used color scheme:
Component authors must use the prefers-color-scheme media feature to support the color schemes on the rest of the elements.
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<section class="default-example container" id="default-example">
<textarea id="example-element">Text Area</textarea>
</section>
#example-element {
width: 80%;
height: 50%;
}
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.
normal
Indicates that the element can be rendered using the page's color scheme settings. If the page does not have a color scheme set, the element is rendered using the page's default color settings.
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.
color-scheme =Examples Declaring color scheme preferences
normal |
[ light | dark | <custom-ident> ]+ && only?
To opt the entire page into the user's color scheme preferences, declare color-scheme on the :root element.
:root {
color-scheme: light dark;
}
To opt in specific elements to the user's color scheme preferences, declare color-scheme on those elements.
header {
color-scheme: only light;
}
main {
color-scheme: light dark;
}
footer {
color-scheme: only dark;
}
Along with the above CSS, also include the <meta name="color-scheme"> HTML <meta> tag in the <head>, before any CSS style information, to inform user agents about the preferred color scheme, helping prevent unwanted screen flashes during the page load.
To style elements based on color scheme preferences, use the prefers-color-scheme media query. The example below opts in the entire page to using both light and dark operating system color schemes via the color-scheme property, and then uses prefers-color-scheme to specify the desired foreground and background colors for individual elements in those color schemes.
:root {
color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
.element {
color: black;
background-color: white;
}
}
@media (prefers-color-scheme: dark) {
.element {
color: white;
background-color: black;
}
}
Alternatively, use the light-dark() <color> function to set the foreground and background colors for the different color schemes using a more compact code structure:
:root {
color-scheme: light dark;
}
.element {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3