Add Dark Mode Support to Your Web Page

Have you ever wondered what's the point of a dark mode (the exciting new feature in iOS 13, macOS Mojave and Android 10) when all the web pages out there simply ignore it? Why would you choose to have a nice dark interface if almost every web page looks basically dull black on white?

The good news is: there is a solution for this. Designers can style their web page based on the user's selected color scheme. Support for this has been added pretty recently so it may take some time before we'll see web pages adopting it.

Impatient as I am, I decided to give it a try immediately and I applied it to my personal navigation web page. It is for sure not the world's first color-scheme-aware web page - nor the prettiest one - but hey! It is optimized for the dark mode! 😉

Try it out: open my web page on your device and try switching between the light and the dark mode. Or just sit back and watch this video:

So how does this work? The key is the CSS media feature prefers-color-scheme:

As you can see in the page source I set more colors in the actual CSS but it is that simple to make your web page aware of the user's color scheme! I expect web sites to adopt this rather sooner than later. When is your web page going to support the dark mode?