Dark mode on your website

With the release of Macos Mojave and the beta of iOs 13 it's possible to bring the system wide darkmode to the web. Using dark colors instead of white reduces glare, which in turn reduces eye fatigue. Most importantly, Dark Mode can improve your ability certain aspects of video and photos, such as color and detail. So it sounds like something we really want to bring to all our websites.

In your stylesheet

Safari comes with a new media query to create a block in your css which will be activated when dark mode is enabled and is called "prefers-color-scheme". It could be used as:

@media (prefers-color-scheme: dark) { }

Possible options for "prefers-color-scheme" are "dark", "light" and "no-preference".

In your HTML document

If you want to show dark images when dark mode is enabled you could benefit from the same media query as in the one your stylesheet. A downside is that you have to upload a second image to your webserver as you will show a different image to your visitor.

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

Support

The support for dark mode is still limited. Today (july 2019) the following browsers do support dark mode:

  • Safari 12.1 or newer
  • Chrome 73 or newer
  • Firefox 67 or newer
  • Safari on iOs 13 or newer