Building a Dark Mode Toggle with TailwindCSS and Next.js

2025-06-08

TailwindCSSNext.jsDark Mode

Dark Mode Toggle in Next.js

Adding a theme switcher is a great way to improve UX. Here's how I implemented it in a recent project.

⚙️ Requirements

  • TailwindCSS (with dark mode class strategy)
  • Next.js (App Router)
  • useEffect to persist theme in localStorage

🧩 Step-by-step

  1. Update tailwind.config.js
js
module.exports = {
  darkMode: 'class',
  // ...
}
  1. Add toggle logic in a component
tsx
'use client';

import { useEffect, useState } from "react";

export function ThemeToggle() {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    document.documentElement.classList.toggle("dark", theme === "dark");
    localStorage.setItem("theme", theme);
  }, [theme]);

  return (
    <button onClick={() => setTheme(t => t === "dark" ? "light" : "dark")}>
      Toggle {theme === "dark" ? "Light" : "Dark"} Mode
    </button>
  );
}
  1. Add class="dark" to <html> via layout.tsx

🎨 Tailwind Dark Utilities

With dark mode enabled, you can now do:

html
<div class="bg-white dark:bg-zinc-900 text-black dark:text-white">
  This supports dark mode!
</div>

🚀 Final Result

Your site now respects user preferences, saves the theme locally, and gives a polished feel.

Happy theming!