prefers-color-scheme

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 feature
Experimental
Chrome Full support 76Edge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Firefox Android Full support 67Opera Android No support NoSafari iOS Full support 13Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

See also