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/actions/admin-theme.ts

@@ -15,6 +15,7 @@ import {
 } from "@/lib/theme-custom-store";
 import { FONTS, PRESETS, THEME_COLOR_KEYS } from "@/lib/theme-presets";
 import { presetSettings, settingKey } from "@/lib/theme-settings";
+import { ensureReadableThemeColors } from "@/lib/theme-contrast";
 
 // Only hex/keyword colour values are accepted (matches ThemeVars' sanitiser).
 const COLOR_RE = /^[#a-zA-Z0-9(),.\s%-]+$/;
@@ -35,12 +36,17 @@ export async function saveTheme(formData: FormData): Promise<void> {
 
 	try {
 		for (const mode of ["light", "dark"] as const) {
+			const bag: Record<string, string> = {};
 			for (const key of THEME_COLOR_KEYS) {
 				const dbKey = settingKey(key, mode);
 				const raw = String(formData.get(dbKey) ?? "")
 					.normalize("NFC")
 					.trim();
-				if (raw && COLOR_RE.test(raw)) await writeSetting(dbKey, raw);
+				if (raw && COLOR_RE.test(raw)) bag[key] = raw;
+			}
+			const fixed = ensureReadableThemeColors(bag);
+			for (const [key, value] of Object.entries(fixed)) {
+				await writeSetting(settingKey(key as (typeof THEME_COLOR_KEYS)[number], mode), value);
 			}
 		}
 		const ADMIN_KEYS = [
@@ -50,12 +56,17 @@ export async function saveTheme(formData: FormData): Promise<void> {
 			"admin_text_muted",
 			"admin_border",
 			"admin_sidebar_bg",
-		];
+		] as const;
+		const adminBag: Record<string, string> = {};
 		for (const key of ADMIN_KEYS) {
 			const raw = String(formData.get(key) ?? "")
 				.normalize("NFC")
 				.trim();
-			if (raw && COLOR_RE.test(raw)) await writeSetting(key, raw);
+			if (raw && COLOR_RE.test(raw)) adminBag[key] = raw;
+		}
+		const adminFixed = ensureReadableThemeColors(adminBag);
+		for (const [key, value] of Object.entries(adminFixed)) {
+			await writeSetting(key, value);
 		}
 
 		const radius = String(formData.get("border_radius") ?? "")