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/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" }}
 		>