DEV Community

Cover image for in 3 minutes Adding Dark/Light Mode Switch to a React App and tailwindcss

Posted on

in 3 minutes Adding Dark/Light Mode Switch to a React App and tailwindcss

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

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

Install Tailwind CSS with 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

npm install react-toggle-dark-mode
Enter fullscreen mode Exit fullscreen 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.

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';
    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)) {
  } else {

  // Return the DarkModeSwitch component
  return (
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode === 'dark'}
Enter fullscreen mode Exit fullscreen mode

step 3: GO to tailwind.config.js


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

Step 3: Integrate Modeswitcher in App Component

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

// File - App.js

import Modeswitcher from "./Components/Modeswitcher";

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

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

            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  
                <p className="mb-3  text-gray-900  dark:text-gray-300" >

                    how are you to day 


export default App

Enter fullscreen mode Exit fullscreen mode

Step 4: Run Your React App

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

Top comments (0)