Since the release of macOS Mojave, a lot of people have expressed their love for dark mode and a lot of websites like Twitter, Reddit or Youtube have followed this trend. Why you may ask? Check out my post Dark mode – React JS First Attempt.

Why dark mode you may ask?

Night is dark. Screen is bright. Eyes hurt.

Night is dark. Screen is dark. Eyes not hurt.

As I want to see even more websites have this feature, I started experimenting with an easy a non-intrusive way to add a dark mode to my React projects, and this is what this article is about.

What we’re going to build:

The objective here is to have a functional dark mode on a website with the following features:

a switch to be able to enable or disable the dark mode

to be able to enable or disable the dark mode a dark and light theme for our styled components to consume

On my example I have used the following:

Follow me on Instagram

That’s it for now.

If you liked this article, then please subscribe to my YouTube Channel for video tutorials.

You can also find me on Twitter and Facebook.