Fix theme switcher desync and auto-correct unreadable saved colors.

Sync dark-mode state from the DOM after mount so admin text no longer needs a double toggle, and normalize text/button colors against their surfaces on theme save.

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

src/components/theme-switcher.tsx

@@ -1,24 +1,25 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 /**
- * Light/dark toggle. The actual class lives on <html> (so `.app.dark` selectors
- * and the dark CSS-var block apply); we mirror localStorage so the choice
- * survives reloads. The inline boot script in the root layout applies the saved
- * theme before paint to avoid a flash — this component only reflects/toggles it.
+ * 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).
  */
 export function ThemeSwitcher() {
-	const [dark, setDark] = useState(
-		() =>
-			typeof window !== "undefined" &&
-			document.documentElement.classList.contains("dark"),
-	);
+	const [dark, setDark] = useState(false);
+	const [ready, setReady] = useState(false);
+
+	useEffect(() => {
+		setDark(document.documentElement.classList.contains("dark"));
+		setReady(true);
+	}, []);
 
 	function toggle() {
-		const next = !dark;
-		setDark(next);
+		const next = !document.documentElement.classList.contains("dark");
 		document.documentElement.classList.toggle("dark", next);
+		setDark(next);
 		try {
 			localStorage.setItem("theme", next ? "dark" : "light");
 		} catch {
@@ -33,6 +34,8 @@ export function ThemeSwitcher() {
 			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"}
+			suppressHydrationWarning
+			style={{ visibility: ready ? "visible" : "hidden" }}
 		>
 			<span aria-hidden className="text-lg leading-none">
 				{dark ? "☀" : "☾"}