In this article I have tried to explain my method of adding dark mode to a
react app created using
create-react-app and SCSS. This is my method and by no
means do I claim it to be the best possible way of adding dark-mode to your
The end goal is to add a dark mode button component which can be added anywhere
in the react application which then on click switches it to dark mode and back. It also keeps track of a user's preference using
localStorage - so if a user returns to the website using the same browser, the previously selected mode will be directly applied.
Let's get started.
As per the official documentation, carry out the following steps:
This will launch the react app on
localhost:3000 and it should look something like this.
Now that we have the react app set up, we can start adding the dark mode. First, we will remove the styles set in
App.css. Remove line 12
background-color: #282c34; and line 19
This is what it should look like:
As mentioned in the title, we will use SCSS so that it is easy to scale the styling when you want to add more dark mode featured styles instead of merely flipping text and background.
Create a new file and name it
style.scss. This is where we will add our color schemes for light and dark mode. Add the following snippet to the file.
Create another file called
DarkModeToggle.js.This will be the main component where we will implement the dark mode toggle.
Add the following code to that file:
Now, include this new
DarkModeToggle component within the
App.js. Include this component right below 'Learn React'.
Now we have a very basic dark mode working. We can add more specific styles to dark mode in the