Add dark theme support with a toggle

shadcn had already generated full light/dark CSS variable sets in globals.css (keyed off a .dark class via @custom-variant), but nothing ever added that class - the app was always light regardless of OS preference. Wires up next-themes (already a dependency, pulled in by sonner.tsx but never provided) with attribute="class", defaulting to the system preference. Adds a sun/moon ThemeToggle button - in the header for the authenticated app, and in the top-right corner of the login page since that route sits outside the header layout. suppressHydrationWarning moves to <html> too (next-themes sets the class there via a pre-hydration script, so server/client will legitimately differ on first paint). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-15 21:11:27 +02:00
parent 35b0d95792
commit a4db53f44d
4 changed files with 55 additions and 16 deletions
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
@@ -31,15 +32,23 @@ export default function RootLayout({
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      suppressHydrationWarning
    >
      <body
        className="bg-background text-foreground flex min-h-full flex-col"
        suppressHydrationWarning
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
        >
          <TooltipProvider>
            {children}
            <Toaster />
          </TooltipProvider>
+        </ThemeProvider>
      </body>
    </html>
  );
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 import { redirect } from "next/navigation";
 import { getConfig } from "@/lib/config/load";
 import { getSession } from "@/lib/auth/session";
+import { ThemeToggle } from "@/components/layout/theme-toggle";
 import { LoginForm } from "./login-form";

 export const metadata: Metadata = { title: "Sign in" };
@@ -16,7 +17,10 @@ export default async function LoginPage() {
  if (session.userId) redirect("/");

  return (
-    <div className="flex min-h-full flex-1 items-center justify-center px-4">
+    <div className="relative flex min-h-full flex-1 items-center justify-center px-4">
+      <div className="absolute top-4 right-4">
+        <ThemeToggle />
+      </div>
      <LoginForm />
    </div>
  );
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation";
 import { Terminal, History, LogOut } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { ThemeToggle } from "./theme-toggle";

 const links = [
  { href: "/", label: "Scripts", icon: Terminal },
@@ -54,8 +55,10 @@ export function Nav({
            ))}
          </nav>
        </div>
+        <div className="flex shrink-0 items-center gap-1 sm:gap-2">
+          <ThemeToggle />
          {authEnabled && (
-          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
+            <>
              <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
                {username}
              </span>
@@ -63,9 +66,10 @@ export function Nav({
                <LogOut className="size-4" />
                <span className="sr-only sm:not-sr-only">Log out</span>
              </Button>
-          </div>
+            </>
          )}
        </div>
+      </div>
    </header>
  );
 }
@@ -0,0 +1,22 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="relative"
+      aria-label="Toggle theme"
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+    >
+      <Sun className="size-4 scale-100 rotate-0 transition-transform dark:scale-0 dark:-rotate-90" />
+      <Moon className="absolute size-4 scale-0 rotate-90 transition-transform dark:scale-100 dark:rotate-0" />
+    </Button>
+  );
+}