in 3 minutes Adding Dark/Light Mode Switch to a React App and tailwindcss
Tags: tailwindcss, react
Published: 2024-02-19 17:41:52

 
Did you know that all people in the world disagreed on their love for movie villains?
But everyone agreed that dark mode is always better 🌓🌑🌒🌗🌘🌚

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/esfjgv6x5mzyo74bbzgm.png)


One of the quickest ways to create an application that react to the tailwindcss
This is the article


[Install Tailwind CSS with Vite
](https://tailwindcss.com/docs/guides/vite)


But what if you want to control the style of your site?

### Step 1: Install Packages

Before implementing the Dark/Light mode switch, make sure you have the required packages installed. In your React project, install the following packages:


 Animated dark mode toggle as seen in blogs!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6ct46rvq93ahwbfu2xh.gif)


 
 




 ```bash
npm install react-toggle-dark-mode
```


### Step 2: Create Modeswitcher Component

Create a new file named `Modeswitcher.js` in the `Components` folder of your project. This component will handle the dark/light mode switching.

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

export default function Modeswitcher() {
  // State to track the current theme
  const [isDarkMode, setDarkMode] = useState(() => localStorage.getItem('theme') || 'light');

  // Add default theme to local storage if not set
  localStorage.theme ? null : localStorage.setItem('theme', 'light');

  // Function to toggle dark mode
  const toggleDarkMode = (checked) => {
    const newTheme = isDarkMode === 'light' ? 'dark' : 'light';
    setDarkMode(newTheme);
    localStorage.setItem('theme', newTheme);
  };

  // Apply dark mode styles based on local storage or system preference
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }

  // Return the DarkModeSwitch component
  return (
    <DarkModeSwitch
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode === 'dark'}
      onChange={toggleDarkMode}
      size={120}
    />
  );
}
```


### step 3: GO to  tailwind.config.js



```
tailwind.config.js


/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  // ...
}
```





### Step 3: Integrate Modeswitcher in App Component

Now, use the `Modeswitcher` component in your main application file (`App.js` or similar).

```jsx
// File - App.js

  
import Modeswitcher from "./Components/Modeswitcher";

 
function App() {
  return (
    <div>
    <div className='text-center pt-10'>
        <h1 className="text-green text-3xl font-bold">
        Dark Mode +  ReactJS + Tailwind CSS

        </h1>
        <h3 className="text-black dark:text-white text-2xl">
               
        </h3>
    </div>
    <center>
        <div
            className="w-80 rounded-lg border p-10
                      bg-white border-gray-800  
            shadow-md dark:bg-gray-800 dark:border-gray-100 "
        >
             
            <Modeswitcher />
            <div className="p-3">
                <a href="##">
                    <h1 className="  font-bold  text-gray-900 dark:text-white" >
                        hello in  
                    </h1>
                </a>
                <p className="mb-3  text-gray-900  dark:text-gray-300" >
                    
                    how are you to day 
                </p>
            </div>
        </div>
    </center>
</div>

  )
}

export default App



```

### Step 4: Run Your React App

After completing the above steps, save your files and run your React app: