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/lib/theme-contrast.ts

@@ -186,6 +186,36 @@ export function readableColor(
 		.sort((a, b) => b.minimum - a.minimum)[0].color;
 }
 
+/** Auto-fix foreground hex keys so saved custom themes stay readable. */
+export function ensureReadableThemeColors(
+	colors: Record<string, string>,
+): Record<string, string> {
+	const out = { ...colors };
+	const fix = (fgKey: string, bgKeys: readonly string[]) => {
+		const preferred = out[fgKey];
+		if (!preferred) return;
+		const backgrounds = bgKeys
+			.map((key) => out[key])
+			.filter((value): value is string => Boolean(value));
+		if (backgrounds.length === 0) return;
+		out[fgKey] = readableColor(preferred, backgrounds);
+	};
+
+	fix("color_text", ["color_surface", "color_background"]);
+	fix("color_text_muted", ["color_surface", "color_background"]);
+	fix("color_navbar_text", ["color_navbar"]);
+	fix("button_text_color", ["button_primary_color", "color_primary"]);
+	fix("button_secondary_text_color", ["button_secondary_color"]);
+	fix("button_danger_text_color", ["button_danger_color"]);
+	fix("button_outline_text_color", ["color_surface", "color_background"]);
+	fix("link_color", ["color_surface", "color_background"]);
+	fix("link_hover_color", ["color_surface", "color_background"]);
+	fix("admin_text", ["admin_canvas", "admin_surface"]);
+	fix("admin_text_muted", ["admin_canvas", "admin_surface"]);
+
+	return out;
+}
+
 function parseHex(value: string): Rgb | null {
 	const trimmed = value.trim();
 	const short = /^#([0-9a-f]{3})$/i.exec(trimmed);