coderef

color-schemeBaseline · Widely available

The color-scheme CSS property sets which color schemes (light or dark) an element uses and may prevent automatic dark mode adjustments by the browser.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Feb 3, 2022. Widely available since Aug 3, 2024.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–97Not supported
98+Supportedsince Feb 1, 2022
Current: 155
Edge
12–97Not supported
98+Supportedsince Feb 3, 2022
Current: 154
Firefox
1–95Not supported
96+Supportedsince Jan 11, 2022
Current: 157
Safari
1–12.1Not supported
13+Supportedsince Sep 19, 2019
Current: 27
MobileChrome Android
18–97Not supported
98+Supportedsince Feb 1, 2022
Current: 155
Firefox Android
4–95Not supported
96+Supportedsince Jan 11, 2022
Current: 157
Safari iOS
1–12.2Not supported
13+Supportedsince Sep 19, 2019
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: color-scheme.

Feature detection

CSS · check before using
@supports (color-scheme: initial) {
  /* styles that rely on color-scheme */
}

/* or in JavaScript */
if (CSS.supports("color-scheme", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (6). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
color-scheme81819613819613
color-scheme.dark81819613819613
color-scheme.light81819613819613
color-scheme.normal81819613819613
color-scheme.only98989613989613
meta.name.color-scheme81819612.1819612.2