This article is more than four years old. The content may be outdated, especially technical examples or references to tooling.
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 to see certain aspects of video and photos, such as color and detail. So on paper 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 (June, 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
