The dark mode is a setting on websites and applications that reverses the standard white background and black text scheme. This is often seen as more visually comfortable for extended use, as it reduces eye strain. The dark mode is becoming more and more popular. This can help users who are trying to avoid eye strain or who are using a device that is difficult to see in bright light.

Dark mode can be helpful for people who are sensitive to bright light, as it is less harsh on the eyes. It can also be helpful for people who are trying to focus on a task.

In this article, we will find out the easiest way to set the dark mode in react apps.

STEP 1 :

Create a new react app :

npx create-react-app my-app
cd my-app

STEP 2 :

Install react-dark-mode-toggle package with npm and start the development server :

npm i react-dark-mode-toggle
npm start

STEP 3 :

Import Dark mode toggle button component and useState hook in App.js. Also, import styles.css.

import "./styles.css";
import React, { useState } from "react";
import DarkModeToggle from "react-dark-mode-toggle";

STEP 4 :

Now add the following code in your App component. Here we have just added a Dark mode toggle button.

export default function App() {

  const [isDarkMode, setIsDarkMode] = useState(false);

  const setDarkMode = (x) => {
    setIsDarkMode(x);
  };

  return (
    <div className="App">
      <DarkModeToggle
        onChange={setDarkMode}
        checked={isDarkMode}
        size={80}
        speed={3}
      />
      <p>Hello React !</p>
   </div>

   )

STEP 5 :

Define CSS color variables in styles.css file :

.App {
  font-family: sans-serif;
  text-align: center;
}

/* DEFAULT THEME COLORS */
:root {
  --text-color: black;
  --background-color: white;
  --a-color: blue;
}

/* DARK THEME COLORS */
.dark {
  --text-color: white;
  --background-color: #212121;
  --a-color: #4fc3f7;
}

/* TEXT COLOR */
p,span,li,h1,h2,h3,h4,h5,h6 {
  color: var(--text-color);
}

/* LINK COLOR */
a {
  color: var(--a-color);
}

/* BODY Background Color */
body {
  background-color: var(--background-color);
}

STEP 6 :

We have defined our dark colors in the .dark class in styles.css. Now we only need to add “dark” in the body class list. We can do this by adding only one line in setDarkMode function.

 const setDarkMode = (x) => {

    setIsDarkMode(x);
   
    //add this line
    document.body.classList.toggle("dark");
  };

Complete code of App.js file :

import "./styles.css";
import React, { useState } from "react";
import DarkModeToggle from "react-dark-mode-toggle";

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const setDarkMode = (x) => {
    setIsDarkMode(x);
    document.body.classList.toggle("dark");
  };

  return (
    <div className="App">
      <DarkModeToggle
        onChange={setDarkMode}
        checked={isDarkMode}
        size={80}
        speed={3}
      />
      <p>Hello React !</p>
      <h3>
        Visit For more tutorials :
        <a href="https://helpincoding.com">https://helpincoding.com</a>{" "}
      </h3>
    </div>
  );
}

READ: How to get form data in react without using useState() hook.

Using Local Storage For Dark Mode :

We can save user preference of dark mode in the local storage of the browser. This means if a user sets dark mode then he should see the website in the dark mode even after refreshing the page. Its very simple to do :

Set a function in useState :

 const [isDarkMode, setIsDarkMode] = useState(() => {
    if (localStorage.getItem("dark") === "true") {
      document.body.classList.add("dark");
      return true;
    } else {
      return false;
    }
  });

Save dark mode preference in local storage :

const setDarkMode = (x) => {
    localStorage.setItem("dark", x);
    setIsDarkMode(x);
    document.body.classList.toggle("dark");
  };

Final Code For Dark Mode In React :

import "./styles.css";
import React, { useState } from "react";
import DarkModeToggle from "react-dark-mode-toggle";

export default function App() {
  const [isDarkMode, setIsDarkMode] = useState(() => {
    if (localStorage.getItem("dark") === "true") {
      document.body.classList.add("dark");
      return true;
    } else {
      return false;
    }
  });

  const setDarkMode = (x) => {
    localStorage.setItem("dark", x);
    setIsDarkMode(x);
    document.body.classList.toggle("dark");
  };

  return (
    <div className="App">
      <DarkModeToggle
        onChange={setDarkMode}
        checked={isDarkMode}
        size={80}
        speed={3}
      />
      <p>Hello React !</p>
      <h3>
        Visit For more tutorials :
        <a href="https://helpincoding.com">https://helpincoding.com</a>{" "}
      </h3>
    </div>
  );
}

This is how you can achieve dark mode in react, if you have any questions you can comment below.