# 🌙 How to Add Dark Mode to a Next.js Landing Page (Tailwind Guide)

#webdev #javascript #nextjs #tailwindcss

Dark mode has become a standard feature for modern SaaS products.

Many users prefer dark interfaces because they reduce eye strain and feel more modern.

In this tutorial we’ll build a simple and clean dark mode system using Next.js and Tailwind CSS.

🧠 Why Dark Mode Matters

Dark mode improves:

• user experience
• accessibility
• modern UI perception

Many popular products support it:

• GitHub
• Notion
• Vercel

Adding dark mode to your landing page immediately makes it feel more polished.

🧩 Component Structure

Example structure:

components/
 theme/
   ThemeProvider.tsx
   ThemeToggle.tsx

This keeps theme logic separate from UI components.

⚙️ Basic Theme Provider

Example simple theme provider:

"use client"

import { createContext, useState } from "react"

export const ThemeContext = createContext()

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState("light")

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div className={theme}>
        {children}
      </div>
    </ThemeContext.Provider>
  )
}

🎨 Using Tailwind Dark Classes

Tailwind makes dark mode extremely easy.

Example:

<div className="bg-white dark:bg-gray-900 text-black dark:text-white">

Tailwind automatically switches styles when the theme changes.

🔘 Theme Toggle Button

A simple toggle component:

export function ThemeToggle({ toggle }) {
  return (
    <button onClick={toggle} className="p-2 border rounded">
      Toggle Theme
    </button>
  )
}