prefers-color-scheme

If you have set privacy.resistFingerprinting to true, prefers-color-scheme preference is overridden to light.
Alternately, users can create the numeric preference ui.systemUsesDarkTheme to override the default behavior and return light (value: 0), dark (value: 1), or no-preference (value: 2). (Any other value causes Firefox to return light.)

The prefers-color-scheme CSS media feature is used to detect if the user has requested the system use a light or dark color theme.

Syntax

light
Indicates that user has notified the system that they prefer an interface that has a light theme, or has not expressed an active preference.
dark
Indicates that user has notified the system that they prefer an interface that has a dark theme.

Examples

The elements below have an initial color theme. They can be further themed according to the user's color scheme preference.

HTML

<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>

CSS

.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

Result

Specifications

Specification Status Comment
Media Queries Level 5
The definition of 'prefers-color-scheme' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
prefers-color-scheme media featureChrome Full support 76Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 62Safari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android No support NoOpera Android Full support 54Safari iOS Full support 13Samsung Internet Android Full support 12.0
no-preference value
DeprecatedNon-standard
Chrome No support 76 — 80Edge No support 79 — 80Firefox No support 67 — 79IE No support NoOpera No support 62 — 71Safari Full support 12.1WebView Android No support 76 — 80Chrome Android No support 76 — 80Firefox Android No support 67 — 79Opera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support 12.0 — 13.0

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

See also