Chrome, Firefox, and Safari now support dark mode for websites

Websites can now add support for native dark mode for Windows, macOS, iOS, and Android by using the prefers-color-scheme CSS media query.

All major desktop and mobile operating systems (OSes) now support native dark mode, which is a feature that darkens the appearance of the OS and supported apps. Websites now have the ability to detect if an OS is using dark mode thanks to the new prefers-color-scheme CSS media query. Using the media query, websites can display a darker site if the visitor is using dark mode on their desktop PC or mobile device.

According to Can I Use, Safari 12.1 was the first browser to support the new media query in March 2019. Firefox 67 began supporting it in May 2019, and Chrome 76 began supporting it in July 2019. Edge doesn’t support it, but it will when they release the next version that uses the Blink rendering engine.

How dark mode works in web browsers

The prefers-color-scheme media query has three values:

  1. no-preference
  2. light
  3. dark

The no-preference value is the equivalent of the default value that all websites have. no-preference might be useful if a website wants to distinguish between light mode and the default style. However, in most cases, sites will only be using the dark value.

When a website adds @media (prefers-color-scheme: dark) to its CSS, they can specify colors that are consistent with a dark mode.

<style type="text/css">
  body {
    color: black;
    background: #eee;
  }
  @media (prefers-color-scheme: dark) {
    body {
      color: white;
      background: #333;
    }
  }
</style>

The media query also works with other elements. Rhys Lloyd described how websites can serve dark mode images natively.

<picture>
  <source srcset="dark-mode-image.png" media="(prefers-color-scheme: dark)">
  <img src="light-mode-image.png" />
</picture>

As dark mode continues to gain popularity on desktop and mobile, expect to see more websites automatically adjust their style to the native color scheme of their visitors.

Jon is the founder and Managing Editor of Coywolf. He is a serial entrepreneur with over 25 years of experience in web development, SaaS, internet strategy, and digital marketing. Follow @henshaw

Never miss an important story – Subscribe to Newsletter