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

This example uses an element with a dark background and white text unless the user has a light preference which will invert these colors.

HTML

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

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

Missing browser compatibility data.

See also

 

Document Tags and Contributors

Contributors to this page: chrisdavidmills, falchloin, dpanov, Siilwyn
Last updated by: chrisdavidmills,