Creating a Dark Mode Toggle in Next.js Using Tailwind CSS

Dark mode has become a default feature for modern websites. It’s easier on the eyes, looks clean, and is often preferred by users browsing in low light. With Tailwind CSS v4 and Next.js, you can implement a smooth dark mode toggle in just a few steps.

This walkthrough shows how to use the latest Tailwind features to create a dark mode switch that’s simple, accessible, and visually seamless.

Why Add a Dark Mode Toggle to Your Next.js Site?

Adding a dark mode toggle isn’t just a trendy feature, it brings real value to your website and your users:

Better User Experience: Many visitors prefer browsing in dark mode, especially in low-light environments. Offering this option makes your site friendlier and more comfortable to use.
Accessibility: Dark mode reduces eye strain and helps users with light sensitivity. It’s a simple way to make your site more inclusive.
Modern Look and Feel: Dark mode adds a polished, professional vibe that keeps your site looking fresh and up to date.
Easy to Implement and Maintain: Using Tailwind CSS v4’s powerful features, toggling dark mode is clean and straightforward—no complex setup needed.
Improved Performance: Since Tailwind handles the CSS efficiently and you save the user’s preference locally, your site stays fast and responsive.

What You’ll Use

Next.js – React-based framework
Tailwind CSS – Utility-first, now with a CSS-first config approach

If you're using one of our premium templates built with Tailwind and Next.js, this guide integrates perfectly with those setups.

Prerequisites

Before starting, make sure you have the following ready:

A Next.js project set up
Tailwind CSS installed and configured in your project
Global styles already imported in app/layout.js or pages/_app.js

If you haven’t done this yet, follow the Tailwind CSS v4 + Next.js setup guide

Enable Dark Mode

Tailwind CSS primarily relies on the prefers-color-scheme CSS media query by default; however, you have the option to manually control dark mode on your site by overriding the dark variant as shown in below example.

@import "tailwindcss";
⁠
@custom-variant dark (&:where(.dark, .dark *));

Create the Dark Mode Toggle Component

Here’s a simple dark mode switch example styled with Tailwind CSS:

// components/DarkModeToggle.js
'use client'

import { useEffect, useState } from 'react'

export default function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false)

  useEffect(() => {
    const saved = localStorage.getItem('theme')
    if (saved === 'dark') setIsDark(true)
  }, [])

  // Bonus: Save Dark Mode Preference (Optional)
  useEffect(() => {
    const className = 'dark'
    const html = document.documentElement.classList
    if (isDark) {
      html.add(className)
      localStorage.setItem('theme', 'dark')
    } else {
      html.remove(className)
      localStorage.setItem('theme', 'light')
    }
  }, [isDark])

  return (
    <button
      onClick={() => setIsDark(!isDark)}
      className="px-3 py-1 rounded bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 transition"
      aria-pressed={isDark}
    >
      {isDark ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
    </button>
  )
}

Use It in Your Layout

Place the toggle anywhere in your layout or header:

// app/layout.js or pages/_app.js
import DarkModeToggle from '@/components/DarkModeToggle'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="bg-white text-black dark:bg-gray-950 dark:text-white">
        <header className="p-4 flex justify-end">
          <DarkModeToggle />
        </header>
        <main className="p-4">
          {children}
        </main>
      </body>
    </html>
  )
}

Example Dark Mode Styling

Now you can apply dark mode styling using dark: variants:

<div className="p-4 bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100 rounded shadow">
  This content responds to dark mode.
</div>

Final Thoughts

With Tailwind CSS v4 and Next.js, adding dark mode is fast, efficient, and scalable. Thanks to the new CSS-first approach in Tailwind v4, your project stays lean and customizable.

Looking to Build Sites with Next.js and Tailwind CSS?

If you want to build fast, modern websites using Next.js and Tailwind CSS, check out our collection of templates. They come with the best features and work smoothly with Next.js. Plus, some of them include dark mode right out of the box.