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
That’s it for now.
If you liked this article, then please subscribe to my YouTube Channel for video tutorials.
