There's no doubt that dark mode is all the rage these days. More and more applications are offering the ability to switch to a dark theme, and for good reason. If you're looking to add dark mode to your React application, there are a few things you'll need to do. In this article, you'll learn how to add dark mode to a React application using the useState and useEffect hooks.

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.

        import React, { useState } from 'react';
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <div className={`App ${theme}`}>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

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:

        import React, { useState } from 'react';
function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

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.

        import React, { useState, useEffect } from 'react';
function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

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:

        .dark {
  background-color: #333;
  color: #fff;
}
.light {
  background-color: #fff;
  color: #333;
}

After that, you'll need to import the CSS file into your application. This can be done with the following code:

        import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

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:

        npm start
    

After that, you can open the application in the browser and click the toggle button to switch between the dark and light modes.

web page with a toggle button and light mode enabled

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:

        import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
  const [theme, setTheme] = useState(
    localStorage.getItem('theme') || 'light'
  );
  const toggleTheme = () => {
    if (theme === 'light') {
      setTheme('dark');
    } else {
      setTheme('light');
    }
  };
  useEffect(() => {
    localStorage.setItem('theme', theme);
    document.body.className = theme;
  }, [theme]);
  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>Toggle Theme</button>
      <h1>Hello, world!</h1>
    </div>
  );
}
export default App;

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.

web page with a toggle button and dark mode enabled

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.