Color Scheme Property
Last updated: 2026-09-13
color-scheme Color Scheme Property
The color-scheme property tells the browser which color schemes (light/dark) an element supports, letting the browser pick suitable default colors for rendering the element's native controls such as scrollbars and form elements. It is an important property for dark-mode adaptation.
| Category | |
|---|---|
| Initial Value | normal |
| Inherited | Yes |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
color-scheme: normal | [ light | dark | <custom-ident> ]+ && only?;⚙️ Values
| Value | Type | Description |
|---|---|---|
normal | light | dark | only | Keyword | The supported color schemes |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| color-scheme | ✓ v79 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： Setting color-scheme: dark on the <html> or <body> lets the browser automatically render native elements like scrollbars and form controls in dark styles.
Tip： only means the element supports only the listed scheme and stops the browser from switching automatically; a light dark combination means both are supported.
❓ FAQ
QWhat is the difference between color-scheme and prefers-color-scheme?
Aprefers-color-scheme is a media query that detects the user's system light/dark preference and decides which stylesheet to load. color-scheme tells the browser which schemes the page or element supports, so it can pick default colors for native controls like scrollbars and forms. In practice they work together: the media query styles your custom colors, and color-scheme keeps native controls in sync.
QDoes an element automatically turn dark after setting color-scheme?
ANo — it does not change the colors you wrote yourself; it only affects the browser's default rendering of native UI such as scrollbars, inputs, dropdown menus, and placeholders. Backgrounds, text, and other custom colors still need to be set manually. For example, html { color-scheme: dark; background: #111; color: #eee; } is what fully renders a dark page.
QHow do I use the only keyword of the color-scheme property in CSS?
Aonly means supports only the listed schemes, no automatic switching. For example, color-scheme: only dark forces the native controls to always render dark, even when the system is in light mode. color-scheme: light dark means both are supported and it follows the system. only fits branded, content-creation pages. The default normal follows the user agent and system settings.
QWhat is the difference between color-scheme and the meta theme-color?
Atheme-color is an HTML meta tag that controls the color of the browser UI shell — the mobile address bar and the window theme color. color-scheme is a CSS property that controls the light/dark rendering of native controls inside the page. They target different layers: one manages the browser chrome, the other the page content. When building dark mode you can set both for a consistent inside-and-out look.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
