How to Add Dark Mode in ReactJS using Tailwind CSS ?

Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code.

Prerequisites:

Approach:

To Add Dark Mode in ReactJS using Tailwind CSS we will be using tailwind classes in the application. Tailwind provides a ‘dark’ variant that helps in styling our website differently when dark mode is enabled. It adds the functionality to switch between light and dark modes.

Creating React Application

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Step 3: After creating the React.js application, install the Tailwind CSS using the following command.

npm i -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 4: Configure template paths and add a class in a dark mode in tailwind.config.js file using the following command:

module.exports = {
      content: [
        "./src/**/*.{js,jsx,ts,tsx}",
      ],
      darkMode: "class",
}

Step 5: Install a Sun/Moon Icon animation module for transition with React.

npm i react-toggle-dark-mode

Project Structure

Project Structure will look like the following.

The Updated list of dependencies after installing required modules

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "react-toggle-dark-mode": "^1.1.1",
        "web-vitals": "^2.1.4"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.16",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.3.5"
    }
}

Example: This example demonstrate the dark mode which is enabled when the button is clicked. This data is stored in the localStorage to store the user preference of web app theme.

Javascript

// Filename - App.js
 
import React from "react";

import Switcher from "./Components/Switcher";
 
function App() {

    return (

        <div>

            <div style={{ textAlign: "center" }}>

                <h1 className="text-green text-3xl font-bold">

                    GeeksforGeeks

                </h1>

                <h3 className="text-black dark:text-white text-2xl">

                    Adding Dark Mode in ReactJS using

                    Tailwind CSS

                </h3>

            </div>

            <center>

                <Switcher />

                <div

                    className="w-56 overflow-hidden bg-white

                rounded-lg border border-gray-200 

                shadow-md dark:bg-gray-800 dark:border-gray-700"

                >

                    <img

                        className="rounded-t-lg"

                        src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"

                        alt="gfg"

                    />

                    <div className="p-5">

                        <a href="##">

                            <h5

                                className="mb-2 text-2xl 

                            font-bold tracking-tight 

                            text-gray-900 dark:text-white"

                            >

                                GeeksforGeeks

                            </h5>

                        </a>

                        <p

                            className="mb-3 font-normal text-gray-700 

                            dark:text-gray-400"

                        >

                            Best coding website for

                            developers in the world.

                        </p>

                    </div>

                </div>

            </center>

        </div>

    );
}
 
export default App;

Javascript

// Filename - Components/Switcher.js
 
import { useState } from "react";

import { DarkModeSwitch } from "react-toggle-dark-mode";

import useDarkSide from "../hooks/useDarkSide";
 
export default function Switcher() {

    const [colorTheme, setTheme] = useDarkSide();

    const [darkSide, setDarkSide] = useState(

        colorTheme === "light" ? true : false

    );
 
    const toggleDarkMode = (checked) => {

        setTheme(colorTheme);

        setDarkSide(checked);

    };
 
    return (

        <>

            <DarkModeSwitch

                style={{ marginBottom: "2rem" }}

                checked={darkSide}

                onChange={toggleDarkMode}

                size={30}

            />

        </>

    );
}

Javascript

// Filename - hooks/useDarkSide.js
 
import { useState, useEffect } from "react";
 
export default function useDarkSide() {

    const [theme, setTheme] = useState(localStorage.theme);

    const colorTheme = theme === "dark" ? "light" : "dark";

    localStorage.setItem("theme", theme);

    useEffect(() => {

        const root = window.document.documentElement;

        root.classList.remove(colorTheme);

        root.classList.add(theme);

        if (localStorage.theme == "dark")

            localStorage.removeItem("theme");

        else localStorage.setItem("theme", theme);

    }, [theme, colorTheme]);
 
    return [colorTheme, setTheme];
}