CSS color-scheme
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. These values are negotiated with the user's preferences (e.g., system Dark Mode).
1. Syntax
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;2. Values
normal: Indicates that the element is not aware of any color schemes, and so should be rendered using the browser's default color scheme (usually light).light: Indicates that the element can be rendered using the operating system's light color scheme.dark: Indicates that the element can be rendered using the operating system's dark color scheme.only: Forbidden from being overridden by the user agent (e.g., Chrome's "Auto Dark Mode").
3. Effects
When you specify color-scheme: dark (or light dark when the user prefers dark):
- System Colors: System colors like
Canvas(background) andCanvasText(text) update to dark values. - Form Controls: Default form controls (scrollbars, inputs, buttons) render in dark mode.
- Spellcheck: Spellcheck underlines change color.
4. Usage
It is best practice to set this on the :root element to enable dark mode for standard UI elements immediately.
:root {
color-scheme: light dark;
}This single line can make a plain HTML page look correct in dark mode without any other CSS, as the browser will use a dark background and light text for the default styles.
5. Interaction with prefers-color-scheme
color-scheme declares support. @media (prefers-color-scheme: dark) allows you to apply custom styles.
However, with the new light-dark() function, color-scheme becomes the switch that toggles the value.
programming/css/css programming/css/light-dark-function programming/css/colors-and-backgrounds