Color-scheme

The color-scheme CSS property informs the browser which color themes a page supports. Common values include light, dark, and light dark.

Unlike traditional dark mode techniques, color-scheme does not automatically change the colors of your custom components such as buttons, cards, navigation bars, or other branded UI elements. Instead, it allows the browser to render built-in UI controls appropriately for light and dark themes.

Syntax

[code theme="dark"] color-scheme: normal; color-scheme: light; color-scheme: dark; color-scheme: light dark; [/code]

Basic Example

[code theme="dark"] :root { color-scheme: light dark; } [/code]

This tells the browser that the page supports both light and dark themes. The browser can then adapt supported native UI elements based on the user's operating system or browser preference.

What Does color-scheme Affect?

The color-scheme property primarily affects browser-provided UI elements.

• Form inputs
• Textareas
• Select dropdowns
• Scrollbars
• Date pickers
• Autofill backgrounds
• Other browser-controlled UI elements

Example

[code theme="dark"] :root { color-scheme: dark; } [/code] [code theme="dark"] [/code]

When the browser supports dark mode rendering, native controls such as inputs and date pickers may automatically appear with dark styling without requiring additional CSS.

What color-scheme Does Not Affect

The property does not automatically style your custom UI components.

[code theme="dark"] .btn-primary { background: hotpink; color: white; } .btn-secondary { background: royalblue; color: white; } [/code]

These buttons keep their defined colors because explicit CSS styles take precedence over browser defaults.

Traditional Dark Mode Approach

Before color-scheme, dark mode was commonly implemented using CSS variables and the prefers-color-scheme media query.

[code theme="dark"] :root { --bg-color: white; } @media (prefers-color-scheme: dark) { :root { --bg-color: #111827; } } body { background: var(--bg-color); } [/code]

Modern Approach

Modern CSS introduces the light-dark() function, which can simplify theme-aware styling.

[code theme="dark" live="true" data="eyJmaWxlcyI6eyIvaW5kZXguaHRtbCI6IjwhRE9DVFlQRSBodG1sPlxuPGh0bWwgbGFuZz1cImVuXCI+XG48aGVhZD5cbiAgICA8bWV0YSBjaGFyc2V0PVwiVVRGLThcIj5cbiAgICA8bWV0YSBuYW1lPVwidmlld3BvcnRcIiBjb250ZW50PVwid2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMFwiPlxuICAgIDx0aXRsZT5DU1MgbGlnaHQtZGFyaygpIEV4YW1wbGU8L3RpdGxlPlxuXG4gICAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCJzdHlsZS5jc3NcIj5cbjwvaGVhZD5cbjxib2R5PlxuXG4gICAgPGgxPkNTUyBsaWdodC1kYXJrKCkgRnVuY3Rpb248L2gxPlxuXG4gICAgPGRpdiBjbGFzcz1cImNhcmRcIj5cbiAgICAgICAgPHA+XG4gICAgICAgICAgICBUaGlzIHBhZ2UgYXV0b21hdGljYWxseSBzd2l0Y2hlcyBiZXR3ZWVuIGxpZ2h0IGFuZCBkYXJrIHRoZW1lc1xuICAgICAgICAgICAgdXNpbmcgdGhlIDxjb2RlPmxpZ2h0LWRhcmsoKTwvY29kZT4gZnVuY3Rpb24uXG4gICAgICAgIDwvcD5cblxuICAgICAgICA8aDI+TmF0aXZlIENvbnRyb2xzIERlbW88L2gyPlxuXG4gICAgICAgIDxpbnB1dCB0eXBlPVwidGV4dFwiIHBsYWNlaG9sZGVyPVwiRW50ZXIgeW91ciBuYW1lXCI+XG5cbiAgICAgICAgPGJyPjxicj5cblxuICAgICAgICA8c2VsZWN0PlxuICAgICAgICAgICAgPG9wdGlvbj5TZWxlY3QgYSBjb3VudHJ5PC9vcHRpb24+XG4gICAgICAgICAgICA8b3B0aW9uPkluZGlhPC9vcHRpb24+XG4gICAgICAgICAgICA8b3B0aW9uPlVTQTwvb3B0aW9uPlxuICAgICAgICAgICAgPG9wdGlvbj5VSzwvb3B0aW9uPlxuICAgICAgICA8L3NlbGVjdD5cblxuICAgICAgICA8YnI+PGJyPlxuXG4gICAgICAgIDxpbnB1dCB0eXBlPVwiZGF0ZVwiPlxuXG4gICAgICAgIDxicj48YnI+XG5cbiAgICAgICAgPGJ1dHRvbj5OYXRpdmUgQnV0dG9uPC9idXR0b24+XG4gICAgPC9kaXY+XG5cbjwvYm9keT5cbjwvaHRtbD4iLCIvc3R5bGUuY3NzIjoiLyogIERlbW86XG4gICAgQ2hhbmdlIHlvdXIgbW9iaWxlIG9yIGRlc2t0b3AgYXBwZWFyYW5jZSBiZXR3ZWVuXG4gICAgTGlnaHQgTW9kZSBhbmQgRGFyayBNb2RlLlxuXG4gICAgVGhlIHBhZ2UgYmFja2dyb3VuZCBhbmQgdGV4dCBjb2xvcnMgd2lsbCBhdXRvbWF0aWNhbGx5XG4gICAgdXBkYXRlIHVzaW5nIGNvbG9yLXNjaGVtZSBhbmQgbGlnaHQtZGFyaygpLlxuXG4gICAgTmF0aXZlIGNvbnRyb2xzIHN1Y2ggYXMgaW5wdXRzLCBzZWxlY3QgbWVudXMsXG4gICAgZGF0ZSBwaWNrZXJzLCBhbmQgYnV0dG9ucyBtYXkgYWxzbyBhZGFwdCB0byB0aGVcbiAgICBjdXJyZW50IGNvbG9yIHNjaGVtZSBkZXBlbmRpbmcgb24gYnJvd3NlciBzdXBwb3J0LiAqL1xuXG46cm9vdCB7XG4gICAgY29sb3Itc2NoZW1lOiBsaWdodCBkYXJrO1xuXG4gICAgLS1iZy1jb2xvcjogbGlnaHQtZGFyayh3aGl0ZSwgIzExMTgyNyk7XG4gICAgLS10ZXh0LWNvbG9yOiBsaWdodC1kYXJrKGJsYWNrLCB3aGl0ZSk7XG5cbiAgICAvKiBFeGFtcGxlOiBSZXBsYWNpbmcgbmF0aXZlIGNvbnRyb2wgY29sb3JzIHdpdGggY3VzdG9tXG4gICAgbGlnaHQgYW5kIGRhcmsgdGhlbWUgdmFsdWVzIHVzaW5nIHRoZSBsaWdodC1kYXJrKCkgZnVuY3Rpb24uICovXG5cbiAgICAtLWJnLWNvbG9yLWJ1dHRvbjogbGlnaHQtZGFyaygjMjU2M2ViLCAjNjBhNWZhKTtcbiAgICAtLXRleHQtY29sb3ItYnV0dG9uOiBsaWdodC1kYXJrKHdoaXRlLCBibGFjayk7XG59XG5ib2R5IHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iZy1jb2xvcik7XG4gICAgY29sb3I6IHZhcigtLXRleHQtY29sb3IpO1xufVxuYnV0dG9uIHtcbiAgICBiYWNrZ3JvdW5kOiB2YXIoLS1iZy1jb2xvci1idXR0b24pO1xuICAgIGNvbG9yOiB2YXIoLS10ZXh0LWNvbG9yLWJ1dHRvbik7XG4gICAgYm9yZGVyOiBub25lO1xuICAgIHBhZGRpbmc6IDAuNzVyZW0gMXJlbTtcbiAgICBib3JkZXItcmFkaXVzOiA4cHg7XG59In0sImFjdGl2ZUZpbGUiOiIvc3R5bGUuY3NzIiwidGVtcGxhdGUiOiJ2YW5pbGxhIn0="] /* Demo: Change your mobile or desktop appearance between Light Mode and Dark Mode. The page background and text colors will automatically update using color-scheme and light-dark(). Native controls such as inputs, select menus, date pickers, and buttons may also adapt to the current color scheme depending on browser support. */ :root { color-scheme: light dark; --bg-color: light-dark(white, #111827); --text-color: light-dark(black, white); /* Example: Replacing native control colors with custom light and dark theme values using the light-dark() function. */ --bg-color-button: light-dark(#2563eb, #60a5fa); --text-color-button: light-dark(white, black); } body { background: var(--bg-color); color: var(--text-color); } button { background: var(--bg-color-button); color: var(--text-color-button); border: none; padding: 0.75rem 1rem; border-radius: 8px; } [/code]

Note: Mode changes may not be visible in this preview iframe. Please click "Open Sandbox" to see the changes.

Both approaches produce a similar result. The newer approach reduces the need for separate media queries in simple cases.

HTML Meta Tag

[code theme="dark"] [/code]

This allows the browser to recognize theme support as early as possible during page rendering. Some native controls may use the correct appearance from the initial render.

Easy Rule

Comparison

When Should You Use color-scheme?

The color-scheme property is especially useful for:

• Content-heavy websites
• Blogs
• Documentation websites
• Minimal UI projects
• Applications that rely on native-looking form controls

It may be less useful in heavily branded applications where every component is already custom-designed and explicitly styled.

Summary

The color-scheme property does not create dark mode by itself. Instead, it tells the browser which color themes your page supports. This allows native controls and browser UI elements to automatically adapt to light and dark themes while preserving your custom brand colors and component styles.