Dark Mode in React

How do you make a dark theme in react JS?

By FAM

Do you like dark mode in apps? Do you like to follow trends and want to implement the dark mode in your app? Or, did you read my article about the reasons to adopt a dark mode in your app?

Whatever the reason is, in this article, you will see it in action!

Here is what we are going to build:

• Live demo

And here are the steps we are going through in this article:

• Create a React app (with react-scripts, since our goal is the toggle mode, not the app itself)
• Create the theme (dark/light)
• Provide and use the theme
• Create a simple toggle button to test the whole things we set up so far
• Adding a sexy toggle button designed by @Khatib in Dribble.
• Admire switching from dark to light mode ❤.

Ready, let’s enjoy!

Step 1: Create a React app (skip if it’s already done)

This step is pretty easy and quick. We’ll be using the react-scripts

npx create-react-app my-app
cd my-app
npm start

Additional dependencies:

After having your app installed, we’ll need bootstrap, reactstrap, and fontawesome (optional). (I chose to use the framework bootstrap because of its simplicity and popularity, you can choose whatever you want as a UI framework). In case you want to learn more about popular UI frameworks for React:

The best UI React frameworks to create a sublime web app!

Step 2: Create the theme (dark/light)

Now, to create a dark mode, I prefer doing it through a theme to know the colors we use and things that are clear and readable for each theme.

For this, I’m going to create a theme context provider:

• Create react context hook

Context is designed to…