Till now depending on the Theme preference –light or dark–set in Windows 10 or MacOS Mojave, Chrome or Firefox or Opera or other browser synchronizes and change their browser UI instantly. How about websites going dark when your OS theme setting set to dark? Interesting! It is possible with media queries: Prefers-color-scheme which Firefox 67 and Chrome 76 support.
The Media Queries CSS Prefers -color-scheme detects if the user prefers a light or dark theme. Safari Technology Preview 68 is first to implement this and Google Chrome is working on it [update:added latest info on it below], while Mozilla to ship Firefox 67, set to release on May 14 has already implemented this feature for their browser.
Chrome to Ship CSS Prefers-color-scheme media feature
Google has announced today that they’ll ship Prefers-color-scheme for Chrome browser for all Blink platforms: Windows, Mac, Linux, Chrome OS, Android, and Android WebView.
The feature will be supported but depending on the platform user need to change the theme via a setting. For instance, on Windows, Mac and Android Q, the user needs to change the theme via system setting and for other platforms, the user has to rely on –force-dark-mode command line argument. Here is an associated bug for Chrome and link to Chrome Platform status entry page.
For your website, through media queries prefers-color- schemes, you can specify three values: no preference, dark or light.
According to MDN web docs, No-preference indicates the user has made no preference known to the system.
light: indicates that the user has notified that the system they prefer an interface that has a light theme.
dark: indicates that the user has notified the system that they prefer an interface that has a dark theme.
If you’re using Firefox 67 or Firefox 68 Nightly, the browser already supports and you can check this demo link. We’ve put a gif below how the feature works in Chrome. Do note, you need to run Chrome Canary with below command line argument.
--enable-blink-features=MediaQueryPrefersColorScheme
UPDATE May 06, 2019: Google Chrome 76 now officially supports prefers-color- scheme media query feature and you can see the feature working in the updated gif above and you don’t need to pass command-line argument. The associated bug has been fixed and target set to Chrome 76. To test it, check out this example in the latest Chrome Canary.
so cool to see popular extensions being implemented within the browser, Dark Reader in this case
i hope someday Video Speed Controller would follow that route