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/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 { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ThemeToggle } from "./theme-toggle";
const links = [
{ href: "/", label: "Scripts", icon: Terminal },
@@ -54,17 +55,20 @@ export function Nav({
))}
</nav>
</div>
{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>
<Button variant="ghost" size="sm" onClick={handleLogout}>
<LogOut className="size-4" />
<span className="sr-only sm:not-sr-only">Log out</span>
</Button>
</div>
)}
<div className="flex shrink-0 items-center gap-1 sm:gap-2">
<ThemeToggle />
{authEnabled && (
<>
<span className="text-muted-foreground hidden max-w-32 truncate text-sm sm:inline-block">
{username}
</span>
<Button variant="ghost" size="sm" onClick={handleLogout}>
<LogOut className="size-4" />
<span className="sr-only sm:not-sr-only">Log out</span>
</Button>
</>
)}
</div>
</div>
</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>
);
}