Google announced support for prefers-color-scheme media query. This means Chrome will display web pages with dark mode color schemes if a user indicates a preference for dark mode. This change begins in Chrome 76.
Beginning with Chrome 76, web developers can now show Chrome visitors a dark mode version if the user sets that as their default viewing preference.
Dark Mode is an Opportunity
Dark mode allows users to browse your site under dark settings. Creating a dark mode version of your site allows you to provide your content to these users in a way that accommodates them. This is good for the publisher because it will keep that user happy and on your site longer.
Some forum and WordPress theme templates come with dark mode alternative stylesheets. But you will probably want to update those so that they are optimized for legibility.
CSS-Tricks.com has an article listing some of the customizations you may wish to consider. For example, there’s a way to make images darker with CSS so that they display better in dark mode.
Dark Mode and Accessibility
Dark mode addresses accessibility concerns. Some sight impaired people have an easier time browsing web pages in dark mode. Others use dark mode because it reduces eye strain.
Dark Mode Preferences Browser Compatibility
According to Mozilla’s developer page on browser compatibility for prefers-color-scheme media query, many major browsers now support dark mode.
Desktop
- Chrome 76
- Firefox 67
- Safari 12.1.
Mobile
- Android Webview 76
- Chrome for Android 76
- Firefox for Android 67
- Safari on iOS 13
Microsoft Edge and Explorer plus Opera do not currently support dark mode for the desktop. Opera for Android does not support dark mode for Android mobile devices.
According to Google:
“Many operating systems now support a dark mode, or dark theme.
The prefers-color-scheme media query, allows you to adjust the look and feel of your site to match the user’s preferred mode.
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}”
Google’s Material Design Page
Google has a Material Design page that discusses the principles of designing for dark mode. In it they suggest:
“Material Design dark themes are defined by the following properties:
Contrast: Dark surfaces and 100% white body text have a contrast level of at least 15.8:1
Depth: At higher levels of elevation, components express depth by displaying lighter surface colors
Desaturation: Primary colors are desaturated so they pass the Web Content Accessibility Guidelines’ (WCAG) AA standard of at least 4.5:1 (when used with body text) at all elevation levels
Limited color: Large surfaces use a dark surface color, with limited color accents (light, desaturated and bright, saturated colors)”
As you can see, a dark mode theme is more than inverting colors, turning black to white and white to black. You may have to choose a less stark contrast for text legibility.
Should You Turn to the Dark Mode?
There are many reasons to add a dark mode version of your site. Allowing users to view your site in dark mode is not only good for users but it may be good for your site and user satisfaction metrics.
Further reading:
Read Google Chrome announcement:
https://developers.google.com/web/updates/2019/07/nic76
Google’s Material Design page on Dark Mode Themes
https://material.io/design/color/dark-theme.html
Mozilla’s Developer page on prefers-color-scheme media query
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
Article about considerations when redesigning for dark mode
https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
