prefers-color-scheme

If you have set privacy.resistFingerprinting to true, prefers-color-scheme preference is overridden to 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

no-preference
Indicates that the user has made no preference known to the system. This keyword value evaluates to false in the boolean context.
light
Indicates that user has notified the system that they prefer an interface that has a light theme.
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 Full support 67Opera Android Full support 54Safari iOS Full support 13Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support

See also