Adding Dark Mode to your Next.js application not only enhances user experience but also improves accessibility and visual appeal. In this guide, you'll learn step-by-step how to set up a Dark Mode toggle using Next.js 15.1, persist user preferences with localStorage, and leverage Tailwind CSS for seamless theme switching. ### Prerequisites Before we get started, make sure you have the following installed: - Node.js - Next.js - Tailwind CSS - npm i lucide-react ### Set up Next.js ```bash npx create-next-app@latest ``` ### 1. **Generate tailwind.config.js**: Configure Tailwind CSS for dark mode support. ```jsx /** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: {}, }, plugins: [], }; ``` ### 2. **Generate app/components/theme-provider.tsx**: Create a provider to manage and persist theme state. ```jsx 'use client' import { createContext, useContext, useEffect, useState } from 'react' type Theme = 'dark' | 'light' type ThemeContextType = { theme: Theme toggleTheme: () => void } const ThemeContext = createContext(undefined) export function ThemeProvider({ children }: { children: React.ReactNode }) { const [theme, setTheme] = useState('light') useEffect(() => { const storedTheme = localStorage.getItem('theme') as Theme | null if (storedTheme) { setTheme(storedTheme) if (storedTheme === 'dark') { document.documentElement.classList.add('dark') } } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { setTheme('dark') document.documentElement.classList.add('dark') } }, []) const toggleTheme = () => { setTheme((prevTheme) => { const newTheme = prevTheme === 'light' ? 'dark' : 'light' localStorage.setItem('theme', newTheme) if (newTheme === 'dark') { document.documentElement.classList.add('dark') } else { document.documentElement.classList.remove('dark') } return newTheme }) } return ( {children} ) } export function useTheme() { const context = useContext(ThemeContext) if (context === undefined) { throw new Error('useTheme must be used within a ThemeProvider') } return context } ``` ### 3. **Generate app/components/theme-toggle.tsx**: Build a toggle button for switching between light and dark modes. ```jsx "use client"; import { useTheme } from "./theme-provider"; import { Moon, Sun } from "lucide-react"; export function ThemeToggle() { const { theme, toggleTheme } = useTheme(); return ( ); } ``` ### 4. **Generate app/layout.tsx**: Set up a shared layout that integrates the theme provider. ```jsx import { ThemeProvider } from "./components/theme-provider"; import "./globals.css"; export default function RootLayout({ children, }: { children: React.ReactNode, }) { return ( {children} ); } ``` ### 5. **Generate app/page.tsx**: Design your main page with support for dark mode styling. ```jsx import { ThemeToggle } from "./components/theme-toggle"; export default function Home() { return (

Welcome to Dark Mode

Click the button to toggle the theme

); } ``` With these components in place, you'll have a fully functional Dark Mode toggle in your application!

Blog

Optimize Docker Storage2025-01-06

Dark Mode Tailwind and Next.js 15.12024-12-24