How to Add Dark Mode in Next.js Using next-themes + Tailwind

Dark mode is a must-have feature in modern web apps. In this guide, you'll learn how to implement a fully functional, accessible, and SSR-friendly dark mode toggle in your Next.js app using the next-themes package and TailwindCSS.

Let’s get started!

step 1 → Create a Next.js App

npx create-next-app@latest

Your Project Folder Structure look like this

📁 my-next-app/
├── app/
│   ├── layout.tsx
│   └── ThemeSwitcher.tsx
├── components/
│   └── ThemeProvider.tsx
├── pages/ (if applicable)
├── public/
├── styles/
├── ...

step 2 → install next-themes dependency

npm install next-themes
# or
pnpm add next-themes
# or
yarn add next-themes

step 3 → create components/ThemeProvider.tsx

// ThemeProvider.tsx
'use client'

import { ThemeProvider as NextThemeProvider } from 'next-themes'
import { type ThemeProviderProps } from 'next-themes'

// Wraps the entire app with next-themes provider
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemeProvider {...props}>{children}</NextThemeProvider>
}

step 4 → modify the app/layout.tsx

   <html lang="en" suppressHydrationWarning>
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`} 
        >
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem={false}
          disableTransitionOnChange
        >
          <div className="relative flex min-h-screen w-full ">
            <div
              className={cn(
                "fixed inset-0 z-0",
                "bg-white dark:bg-black",
              )}
            />
            
            <div className="relative z-10 w-full text-gray-900 dark:text-gray-100">
              {children}
            </div>
          </div>
        </ThemeProvider>
      </body>
    </html>

Key Configuration:

attribute="class": Uses CSS classes for theme switching