What Is the Dark Mode?
The dark mode is a theme that switches the color palette of an application from light to dark. Nowadays, most applications have the ability to switch between light and dark modes. This can be helpful for those who prefer to work in a dark environment, or for those who find it easier on the eyes.
Why Use Dark Mode?
There are a number of reasons why you might want to use dark mode in your React application. Let’s take a look at a few of the most popular ones.
1. Improve Battery Life
One of the benefits of the dark mode is that it can help improve battery life on devices with OLED or AMOLED displays. This is because darker pixels require less power to display.
2. Reduce Eye Strain
If you find yourself browsing the web or using apps at night, the dark mode can help reduce eye strain. This is because it decreases the amount of bright white or blue light that is emitted from the screen.
3. Create a More Immersive Experience
Some people find that dark mode creates a more immersive experience. This can be especially true when using apps or websites with a lot of content, such as news apps or social media.
How to Add Dark Mode to a React Application
Adding dark mode to a React application is relatively simple. The steps necessary to add dark mode to your React application are listed below.
Before we get started, you’ll need to make sure you have a React application set up.
1. Use the useState Hook
The first thing you’ll need to do is to create a state variable to track the current theme of your application. This can be done using the useState hook. For this, you should have a basic understanding of how to work with the useState hook.
The code snippet imports the useState hook from React and creates a state variable called theme. The theme variable tracks the current theme of the application, which the code sets to ’light’ by default.
2. Add a Toggle Button
Next, add a toggle button to the application so that users can switch between light and dark mode. This can be done with the following code:
The code snippet above includes a toggleTheme function to change the theme state variable between ’light’ and ‘dark’, as well as a button to call the toggleTheme function when clicked.
3. Use the useEffect Hook
Next, use the useEffect hook to dynamically update the theme of the application based on the theme state variable.
The code snippet above uses the useEffect hook to update the className of the document.body element based on the theme state variable. This allows you to dynamically update the CSS of the application based on the theme.
4. Adding the CSS for Dark and Light Modes
Next, add the CSS for the dark and light modes. You can do this by creating a file called ‘darkMode.css’ and adding the following CSS:
After that, you’ll need to import the CSS file into your application. This can be done with the following code:
5. Switch to Different Modes
Now that you have added the CSS for the dark and light modes, you can switch between them by clicking the toggle button. To do this, you first have to start the development server. You can do this by running the following terminal command:
After that, you can open the application in the browser and click the toggle button to switch between the dark and light modes.
Additional Options for Dark Mode in React
If you want the theme to persist across page refreshes, you can use the localStorage API to store the data. To do this, you’ll first need to add the following code to your application:
The code snippet above includes the ability to keep the theme after page refreshes. This is done by using the localStorage API. First, it checks to see if there is a theme stored in localStorage.
If there is a theme, that theme is used. If not, the ’light’ theme is used. Next, code is added to the useEffect hook to store the theme in localStorage. This ensures that the theme is persisted across page refreshes.
Dark Mode Doesn’t End in React
There are many ways you can add dark mode to your React application. In this article, one way to do it using the useState and useEffect hooks is shown. However, there are many other ways you can do it as well.
For example, you could use the React Context API to create a theme provider. This would allow you to wrap your entire application in a theme provider component and access the theme anywhere in your application.
You can also enable dark mode on your browser and use CSS media queries to apply different styles depending on the browser’s theme.
