valknar/triggershell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark theme support with a toggle

Browse Source 
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>
This commit is contained in:
valknar
2026-08-15 21:11:27 +02:00
co-authored by Claude Sonnet 5
parent 35b0d95792
commit a4db53f44d
4 changed files with 55 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/app/layout.tsx
+13 -4
View File
@@ -1,5 +1,6 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google"; import { Geist, Geist_Mono } from "next/font/google";
import { ThemeProvider } from "next-themes";
import { TooltipProvider } from "@/components/ui/tooltip"; import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/sonner"; import { Toaster } from "@/components/ui/sonner";
import "./globals.css"; import "./globals.css";
@@ -31,15 +32,23 @@ export default function RootLayout({
<html <html
lang="en" lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`} className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
suppressHydrationWarning
> >
<body <body
className="bg-background text-foreground flex min-h-full flex-col" className="bg-background text-foreground flex min-h-full flex-col"
suppressHydrationWarning suppressHydrationWarning
> >
<TooltipProvider> <ThemeProvider
{children} attribute="class"
<Toaster /> defaultTheme="system"
</TooltipProvider> enableSystem
disableTransitionOnChange
>
<TooltipProvider>
{children}
<Toaster />
</TooltipProvider>
</ThemeProvider>
</body> </body>
</html> </html>
); );
app/src/app/login/page.tsx
+5 -1
View File
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { getConfig } from "@/lib/config/load"; import { getConfig } from "@/lib/config/load";
import { getSession } from "@/lib/auth/session"; import { getSession } from "@/lib/auth/session";
import { ThemeToggle } from "@/components/layout/theme-toggle";
import { LoginForm } from "./login-form"; import { LoginForm } from "./login-form";
export const metadata: Metadata = { title: "Sign in" }; export const metadata: Metadata = { title: "Sign in" };
@@ -16,7 +17,10 @@ export default async function LoginPage() {
if (session.userId) redirect("/"); if (session.userId) redirect("/");
return ( 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 /> <LoginForm />
</div> </div>
); );
app/src/components/layout/nav.tsx
+15 -11
View File
@@ -5,6 +5,7 @@ import { usePathname, useRouter } from "next/navigation";
import { Terminal, History, LogOut } from "lucide-react"; import { Terminal, History, LogOut } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { ThemeToggle } from "./theme-toggle";
const links = [ const links = [
{ href: "/", label: "Scripts", icon: Terminal }, { href: "/", label: "Scripts", icon: Terminal },
@@ -54,17 +55,20 @@ export function Nav({
))} ))}
</nav> </nav>
</div> </div>
{authEnabled && ( <div className="flex shrink-0 items-center gap-1 sm:gap-2">
<div className="flex shrink-0 items-center gap-2 sm:gap-3"> <ThemeToggle />
<span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block"> {authEnabled && (
{username} <>
</span> <span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
<Button variant="ghost" size="sm" onClick={handleLogout}> {username}
<LogOut className="size-4" /> </span>
<span className="sr-only sm:not-sr-only">Log out</span> <Button variant="ghost" size="sm" onClick={handleLogout}>
</Button> <LogOut className="size-4" />
</div> <span className="sr-only sm:not-sr-only">Log out</span>
)} </Button>
</>
)}
</div>
</div> </div>
</header> </header>
); );
app/src/components/layout/theme-toggle.tsx
+22
View File
@@ -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>
);
}