Web/CSS/@media/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 5The definition of 'prefers-color-scheme' in that specification.	Editor's Draft	Initial definition.

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`prefers-color-scheme` media feature	Chrome Full support 76	Edge Full support 79	Firefox Full support 67	IE No support No	Opera Full support 62	Safari Full support 12.1	WebView Android Full support 76	Chrome Android Full support 76	Firefox Android No support No	Opera Android Full support 54	Safari iOS Full support 13	Samsung Internet Android Full support 12.0
`no-preference` value Deprecated'Non-standard'	Chrome No support 76 — 80	Edge No support 79 — 80	Firefox No support 67 — 79	IE No support No	Opera No support 62 — 71	Safari Full support 12.1	WebView Android No support 76 — 80	Chrome Android No support 76 — 80	Firefox Android No support 67 — 79	Opera Android Full support 54	Safari iOS Full support 13	Samsung 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.