Web browsers currently handle dark mode in one of two ways. Some of them, like Samsung Browser, simply invert the colors of the web page. This sometimes breaks the site’s design, but it works universally. Another approach is to let sites know that dark mode is activated, and let them use an alternative theme. Chrome appears to be joining the latter camp, as the browser’s development team announced support the ‘prefers-color-scheme’ browser feature.
The prefers-color-scheme feature was first introduced by Apple, and arrived as part of Safari 12.1 on macOS Mojave. It allows sites to define certain styles for dark mode (for example, turning a white background to black), and when the user’s operating system switches to dark mode, those styles are automatically activated. Mozilla has also implemented the feature in the upcoming Firefox 67 release.
Added styles on https://t.co/Cafp43rXH3 for dark mode users on Safari Technology Preview 68 using prefers-color-scheme. Looking forward to seeing widespread adoption of level 5 draft media features including prefers-contrast and light-level. pic.twitter.com/U2aoDlN1zn
— Jordan Moore (@jordanmoore) November 2, 2018
The Chrome team announced an ‘Intent to Ship’ for the feature, meaning development has begun. The post also went into detail about how it would work on different platforms:
In short, the feature itself will be supported, but what it evaluates to may vary between platforms and their ability to let the user change the theme.
Supported in Chrome via system setting on Android Q, MacOS, Windows, and via –force-dark-mode on other platforms. There is also a setting in Chrome for Android to override the system setting.
Hopefully, sites will begin to implement their own dark themes in preparation for Chrome adding this feature. When it arrives, you can check out this demo or my own site to see it in action.
- Source:
- Google Groups
- Via:
- TechDows
