Theprefers-color-schemeCSSmedia feature is used to detect if a user has requested light or dark color themes.A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.

Embedded elements

For SVG and iframes,prefers-color-scheme lets you set a CSS style for the SVG or iframe based on thecolor-scheme of the parent element in the web page.SVGs must be used embedded (i.e.,<img src="circle.svg" alt="circle" />) as opposed toinlined in HTML.An example of usingprefers-color-scheme in SVGs can be found in the"Inherited color scheme in embedded elements" section.

Usingprefers-color-scheme is allowed incross-origin<svg> and<iframe> elements. Cross-origin elements are elements retrieved from a different host than the page that is referencing them.To learn more about SVGs, see theSVG documentation and for more information about iframes, see theiframe documentation.

Syntax

light

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

dark

Indicates that user has notified that they prefer an interface that has a dark theme.

Examples

Detecting a dark or light theme

A common usage is to use a light color scheme by default, and then useprefers-color-scheme: dark to override the colors to a darker variant. It is also possible to do it the other way around.

This example shows both options: Theme A uses light colors, but can be overridden to dark colors. Theme B uses dark colors, but can be overridden to light colors. In the end, if the browser supportsprefers-color-scheme, both themes will be light or dark.

HTML

<div>Theme A (initial)</div><div>Theme A (changed if dark preferred)</div><br /><div>Theme B (initial)</div><div>Theme B (changed if light preferred)</div>

CSS

div.box {  display: inline-block;  padding: 1em;  margin: 6px;  outline: 2px solid black;  width: 12em;  height: 2em;  vertical-align: middle;}

Theme A (brown) uses a light color scheme by default, but will switch to a dark scheme based on the media query:

.theme-a {  background: #ddccaa;  color: #773311;}@media (prefers-color-scheme: dark) {  .theme-a.adaptive {    background: #775533;    color: #ddccbb;    outline: 5px dashed black;  }}

Theme B (blue) uses a dark color scheme by default, but will switch to a light scheme based on the media query:

.theme-b {  background: #444477;  color: #bbbbdd;}@media (prefers-color-scheme: light) {  .theme-b.adaptive {    background: #bbccdd;    color: #333344;    outline: 5px dotted black;  }}

Result

The left boxes shows Theme A and Theme B as they would appear without theprefers-color-scheme media query. The right boxes show the same themes, but one of them will be changed to a darker or lighter variant based on the user's active color scheme. The outline of one box will be dashed or dotted if it was changed based on your browser or operating systems settings.

Inherited color scheme in embedded elements

The following example shows how to use theprefers-color-scheme media feature in an embedded element to inherit a color scheme from a parent element.A script is used to set the source of the<img> elements and theiralt attributes. This would normally be done in HTML as<img src="circle.svg" alt="circle" />.

You should see three circles, with one drawn in a different color.The first circle inherits thecolor-scheme from the OS and can be toggled using the system OS's theme switcher.

The second and third circles inherit thecolor-scheme from the embedding element; the@media query allows setting styles of the SVG content based on the parent element'scolor-scheme.In this case, the parent element with acolor-scheme CSS property is a<div>.

<div>  <img alt="circle" src="" /></div><div>  <img alt="circle" src="" /></div><div>  <img alt="circle" src="" /></div>

.light {  color-scheme: light;}.dark {  color-scheme: dark;}

// Embed an SVG for all <img> elementsfor (const img of document.querySelectorAll("img")) {  img.src = `data:image/svg+xml;base64,${window.btoa(`    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">      <style>        :root { color: blue }        @media (prefers-color-scheme: dark) {          :root { color: purple }        }      </style>      <circle fill="currentColor" cx="16" cy="16" r="16"/>    </svg>  `)}`;}

Specifications

Browser compatibility

See also

• color-scheme property
• <meta name="color-scheme">
• Sec-CH-Prefers-Color-Scheme HTTP HeaderUser Agent Client Hint
• Simulate prefers-color-scheme in Firefox
• Video: Coding a Dark Mode for your Website
• Redesigning your product and website for dark mode
• Changing color schemes inWindows,macOS,Android, orother platforms.