color-scheme
color-scheme tells the browser which built-in color themes an element or page can support. It helps native form controls, scrollbars, and default surfaces align with light or dark UI.
Overview
color-scheme tells the browser which built-in color themes an element or page can support. It helps native form controls, scrollbars, and default surfaces align with light or dark UI.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 81 | 81 | 96 | 13 | 81 | 13 | |
dark | 81 | 81 | 96 | 13 | 81 | 13 |
light | 81 | 81 | 96 | 13 | 81 | 13 |
normal | 81 | 81 | 96 | 13 | 81 | 13 |
only `only` keyword | 98 | 98 | 96 | 13 | 98 | 13 |
| Other | ||||||
| The color-scheme value for the name attribute of the meta element indicates a suggested color scheme that user agents should use for a page. If specified, you define the color scheme using a content attribute in the element with a valid CSS color-scheme value. | 81 | 81 | 96 | 12.1 | 81 | 12.2 |
- This feature was removed in a later browser version (85)
- This feature was removed in a later browser version (85)
- This feature was removed in a later browser version (85)
Syntax
/* Declare support for both light and dark modes */
:root {
color-scheme: light dark;
}
/* Set specific elements to light mode only */
.always-light {
color-scheme: light;
}
/* Use in conjunction with meta tags */
/* <meta name="color-scheme" content="light dark"> */Live demo
Use cases
Theme-aware pages
Declare light and dark support so built-in controls render in a way that matches the surrounding interface.
Embedded components
Scoped color-scheme can help widgets inside a larger page inherit the right native control styling.
Cautions
- Declaring dark support without testing contrast and component styling can create mismatched or unreadable UI.
- color-scheme does not replace explicit design tokens or full theme logic for custom components.
Accessibility
- Theme support should maintain readable contrast and predictable focus states in every declared scheme.
Related links
Powered by web-features