Dark Mode mit Next.js

Das Integrieren eines Dark-Modes, insbesondere mit der Verwendung von shadcn/ui, ist einfacher als gedacht. In diesem Beitrag zeige ich euch, wie ihr mittels Next.js und Tailwind CSS einen Dark Mode in eurer Web-App implementiert.

Wir nutzen hierfür die Bibliothek next-themes, zu installieren mittels:

npm install next-themes

Im Anschluss erstellt ihr den Provider components/theme-provider.tsx, den ihr um eure gesamte App legt.

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

Danach hintelegt ihr den Provider in eurer app/layout.tsx.

import { ThemeProvider } from "@/components/theme-provider";

export default function RootLayout({ children }: RootLayoutProps) {
    return (
        <>
            <html lang="en" suppressHydrationWarning>
                <head />
                <body>
                    <ThemeProvider
                        attribute="class"
                        defaultTheme="system"
                        enableSystem
                        disableTransitionOnChange
                    >
                        {children}
                    </ThemeProvider>
                </body>
            </html>
        </>
    );
}

Im Prinzip war es das auch schon. In eurem Tailwind classNames könnt ihr nun einfach den dark: Prefix nutzen. Um den Dark-Mode jetzt auch wechselbar zu machen und nicht nur auf die System-Einstellung zu achten, könnt ihr nun noch einen Switch in eure App einbauen. Mit der Verwendung von shadcn/ui, könnte das ganze so aussehen:

"use client";

import * as React from "react";
import { Moon, Sun } from "lucide-react";
import { useTheme } from "next-themes";

import { Button } from "@/components/ui/button";
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

export function ModeToggle() {
    const { setTheme } = useTheme();

    return (
        <DropdownMenu>
            <DropdownMenuTrigger asChild>
                <Button variant="outline" size="icon">
                    <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
                    <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
                    <span className="sr-only">Toggle theme</span>
                </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
                <DropdownMenuItem onClick={() => setTheme("light")}>
                    Light
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("dark")}>
                    Dark
                </DropdownMenuItem>
                <DropdownMenuItem onClick={() => setTheme("system")}>
                    System
                </DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    );
}

Diesen Button hinterelgt ihr einfach im Header oder Footer eurer App und schon können eure User selbst entschieden, welches Theme dargestellt wird.

Ich hoffe, euch konnte dieses kleine Tutorial helfen.

Happy Coding! 🎉