How I added dark mode support to my website

It’s all over the place these days. Popular apps such as Facebook Messenger, Twitter, Reddit, … have had a dark mode for quit a while now and as of now both Android 10 and iOS13 have native support for it.

Why dark mode support on a website?

Ever been browsing through apps like Reddit or Twitter using dark mode, finding an article which looks interesting and all of a sudden you get a white website slammed in your face? Me too!

When a user makes a choice between dark or light mode, that’s a personal preference which indicates how he would like to use the interface. It’s actually a personal preference from our visitor which we can use without having to throw dozens of measurement tools into his browser and having to analyse them. So we could use this personal preference to try and give our user a better experience visiting our website.

This is how it works

After a single search in Google, and hitting a link to StackOverflow obviously, the answer was right there. I couldn’t believe how easy it was to get that preference. I tested in different browsers on different devices and it just kept working.

All you need is a simple CSS media query in which you, well, just get the preference. Just as easy as setting a media query for print, and easier than adding one to target iPad’s only.

// For dark mode
@media (prefers-color-scheme: dark) { ... }

// For light mode
@media (prefers-color-scheme: light) { ... }

That’s it, there’s nothing more to it!

Is it worth the effort?

This blog is indeed a small one with a simple layout, only a few templates and not too many features. It only took me like half an hour to get my layout in a way I liked it.

With larger applications the impact would be much bigger of course. But you don’t have to integrate an extra full light or dark mode version. Why not just changing the tints. If you have a website with a white background for example, you could just make it a bit less white. The visitors might just appreciate the effort you did on not blinding them.

In the end, it’s really something you have to decide for yourself. I added it to this blog to test it out, but I don’t think I’ll add it to my business site.