Starting with macOS Mojave, Windows 10 version 1903, and Android Pie, users can set a system-wide preference for dark mode or light more within apps. The idea is supposed to be that you set a preference once and every application on the device then respects that preference. So, how do you get your website to respect those system preferences?
Well, starting in recent versions of (chromium versions of) Edge, Firefox, Chrome, and Safari, you can use the prefers-color-scheme media query.
Since it is a media query (and uses a binary setting), you can default it in one direction or the other.
As you can see above, all you need to do is wrap a chunk of CSS in “@media screen and (prefers-color-scheme: light)” or “@media screen and (prefers-color-scheme: dark)”.
Have any questions? Feel free to drop a comment, below or shoot me a tweet at @steinbring.
Top comments (1)
Man, that's incredible, I've been searching for a easy way to do that for about a week now.
Thanks