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.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay