How to add a dark mode to your React web app

We are currently living in a dark mode in everything era. Most apps nowadays come with a switch either at the navbar or just somewhere around its settings, that you just click and the screen goes dark. Some apps even come with dark mode as default, example Mixer, even Netflix has a dark mode by default.

Having a dark mode will really help in reducing the tiring of eyes caused by light modes and by the end of this article, you should be able to add dark mode to your Reactjs app in a few minutes.

Prerequisites

You should have a basic understanding of:

React concepts(life cycles)

CSS concepts, especially css variables

Javascript Document Object Model

Setup

Create a new directory that will house our React app.

$ mkdir simple_dark_theme_react_app && cd simple_dark_theme_react_app

Next, we will need the create-react-app CLI that will help set up a simple React app faster with zero webpack configs.

$ npx create-react-app .

Run our app

$ yarn start or npm start

It should automatically launch your browser, if not visit http://localhost:3000.

If you happen to face a fsevents is not a constructor visit this Github issues raised about it link

If that does not help, all I did was delete the lock file and the node_module folder and reinstalled the packages.