Dark mode – React JS First Attempt

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
a dark and light theme for our styled components to consume

On my example I have used the following:

• react js – 16.12.0
• material ui – 4.9.5
• classnames package – 2.2.6

Check Demo & Code

😉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.