DEV Community

Panayiotis Georgiou
Panayiotis Georgiou

Posted on


Dark mode – React JS First Attempt

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.

Top comments (0)

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓