So, you want to enable dark mode on your website?

#coding #css #preferscolorscheme

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.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.