Adding dark mode to your web app

Almost two years ago, I looked at how to use prefers-color-scheme to add “dark mode” to a website.  It isn’t exactly a difficult change to make, so I figured that we could take this week to add it to the State Parks App.  The last time we looked at this, it was supported by everything …

Continue reading "Adding dark mode to your web app"

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

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.

Light Mode by Default

See the Pen
How to implement light mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

Dark Mode by Default

See the Pen
How to implement dark mode (by default) in CSS
by Joe Steinbring (@steinbring)
on CodePen.

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.