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 for the 'prefers-color-scheme' browser feature.
The 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.For Android WebView, the 'prefers-color-scheme' media feature will match 'no-preference' when forced darkening is enabled to not have the web content apply dark styles before automatic darkening is applied. See https://developer.android.com/
reference/android/webkit/ WebSettings.html# setForceDarkMode(int)
- Google Groups