DEV Community

Cover image for Build a Dark Mode Toggle in Vite + React
Akhilesh
Akhilesh

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Enable dark mode in tailwind.config.cjs:

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

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;
Enter fullscreen mode Exit fullscreen mode

Step 3: Test It Out

Run your app:

npm run dev
Enter fullscreen mode Exit fullscreen mode

What You Achieved

✔ Fully working Dark/Light theme switch
✔ Theme preference saved in localStorage
✔ Smooth transition with Tailwind’s utility classes

🔥 That’s it! You’ve just built a modern Dark Mode Toggle for your React website.
Now your project looks sleek in both 🌞 Light and 🌙 Dark.

👉 Save this post for later & share it with a friend who loves Dark Mode!

Top comments (0)