Add dark/light toggle to admin sidebar and topbar.

Reuse ThemeSwitcher with an admin variant (Sun/Moon) next to the staff profile and in the housekeeping header.

Co-authored-by: Cursor <[email protected]>

src/app/admin/layout.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from "react";
 import { AdminHubChrome } from "@/components/admin/admin-hub-chrome";
 import { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
+import { ThemeSwitcher } from "@/components/theme-switcher";
 import { requireStaff } from "@/lib/admin/guard";
 import { ADMIN_NAV_GROUPS } from "@/lib/admin-nav";
 import { prisma } from "@/lib/prisma";
@@ -73,6 +74,7 @@ async function Sidebar({
 						{t("rankLabel", { rank: staff.rank })}
 					</span>
 				</div>
+				<ThemeSwitcher variant="admin" />
 			</div>
 
 			<nav className="flex-1 overflow-y-auto px-3 py-4">
@@ -141,6 +143,7 @@ async function Topbar({
 				</span>
 			</div>
 			<div className="flex items-center gap-3">
+				<ThemeSwitcher variant="admin" />
 				<span className="text-xs text-[var(--admin-text-muted)]">
 					<strong className="text-[var(--admin-text)]">{staff.username}</strong>
 				</span>

src/components/theme-switcher.tsx

@@ -1,13 +1,18 @@
 "use client";
 
+import { Moon, Sun } from "lucide-react";
 import { useEffect, useState } from "react";
 
 /**
  * Light/dark toggle. The class lives on <html>; theme-init.js applies the
  * saved choice before paint. We sync React state after mount so SSR hydration
- * does not desync from the real DOM class (which forced a double-click before).
+ * does not desync from the real DOM class.
  */
-export function ThemeSwitcher() {
+export function ThemeSwitcher({
+	variant = "nav",
+}: {
+	variant?: "nav" | "admin";
+}) {
 	const [dark, setDark] = useState(false);
 	const [ready, setReady] = useState(false);
 
@@ -27,13 +32,32 @@ export function ThemeSwitcher() {
 		}
 	}
 
+	const label = dark ? "Switch to light mode" : "Switch to dark mode";
+	const title = dark ? "Light mode" : "Dark mode";
+
+	if (variant === "admin") {
+		return (
+			<button
+				type="button"
+				onClick={toggle}
+				aria-label={label}
+				title={title}
+				suppressHydrationWarning
+				className="flex-none grid place-items-center w-9 h-9 rounded-xl border border-[var(--admin-border)] text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)]"
+				style={{ visibility: ready ? "visible" : "hidden" }}
+			>
+				{dark ? <Sun size={16} /> : <Moon size={16} />}
+			</button>
+		);
+	}
+
 	return (
 		<button
 			type="button"
 			onClick={toggle}
 			className="nav-item cursor-pointer text-lg leading-none px-2"
-			aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
-			title={dark ? "Light mode" : "Dark mode"}
+			aria-label={label}
+			title={title}
 			suppressHydrationWarning
 			style={{ visibility: ready ? "visible" : "hidden" }}
 		>