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.

Image of Datadog

Measure and Advance Your DevSecOps Maturity

In this white paper, we lay out a DevSecOps maturity model based on our experience helping thousands of organizations advance their DevSecOps practices. Learn the key competencies and practices across four distinct levels of maturity.

Get The White Paper

Top comments (0)