Build a Dark Mode Toggle in Vite + React

#darkmode #react #webdev #uidesign

Dark Mode isn’t just a “cool feature” anymore — it’s a user expectation.
Let’s learn how to build a sleek Dark Mode Toggle for your website in just a few minutes using Vite + React + TailwindCSS 🚀

Step 1:Setup Your Project

# Create Vite project
npm create vite@latest dark-mode-toggle
cd dark-mode-toggle
npm install

# Add TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Enable dark mode in tailwind.config.cjs:

export default {
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: { extend: {} },
  plugins: [],
}

Step 2: Create the Toggle Logic

Inside App.jsx:

import { useState, useEffect } from "react";

function App() {
  const [darkMode, setDarkMode] = useState(
    localStorage.getItem("theme") === "dark"
  );

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  }, [darkMode]);

  return (
    <div className="min-h-screen flex items-center justify-center bg-white dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-500">
      <div className="text-center">
        <h1 className="text-3xl font-bold mb-6">Dark Mode Toggle 🌗</h1>
        <button
          onClick={() => setDarkMode(!darkMode)}
          className="px-6 py-2 rounded-2xl bg-gray-200 dark:bg-gray-700 hover:scale-105 transition-transform"
        >
          {darkMode ? "☀ Light Mode" : "🌙 Dark Mode"}
        </button>
      </div>
    </div>
  );
}

export default App;

Step 3: Test It Out

Run your app: