Dark Mode

Set up dark mode using next-themes.

DocsAPI Reference

Install the next-themes package.

pnpm add next-themes

Edit your root layout.tsx file to include the ThemeProvider component.

import "~/styles/globals.css";

import { ThemeProvider } from "next-themes";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head />
      <body>
        <ThemeProvider
          defaultTheme="dark"
          attribute="class"
          disableTransitionOnChange
        >
          <Header />
          <main>{children}</main>
        </ThemeProvider>
      </body>
    </html>
  );
}

Add your theme toggle component. Mine looks like this. Learn more about toggling your theme here.

"use client";

import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import { MoonStarIcon, SparklesIcon, SunIcon } from "lucide-react";

import { Button } from "~/components/ui/Button";

export default function ThemeToggle() {
  const [mounted, setMounted] = useState(false);
  const { theme, setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return (
      <div className="flex size-9 items-center justify-center rounded-2 border text-foreground md:size-10">
        {/* bejeweled */}
        <SparklesIcon size={18} />
      </div>
    );
  }

  return (
    <Button
      size="icon"
      variant="outline"
      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
      className="md:size-10"
    >
      {theme === "light" ? <SunIcon size={18} /> : <MoonStarIcon size={18} />}
    </Button>
  );
}