From 0fb86e15b9eb3ddb073cec5a187adfef066af1d2 Mon Sep 17 00:00:00 2001 From: Daniel Han Date: Tue, 19 May 2026 06:56:15 -0700 Subject: [PATCH] studio/frontend: keep theme classes mutually exclusive on (#5580) * studio/frontend: keep theme classes mutually exclusive on The Sonner Toaster reads next-themes (mounted at provider.tsx with attribute="class" defaultTheme="light"), so on first mount next-themes adds a "light" class to . Studio's own setTheme path (features/settings/stores/theme-store.ts) only toggled "dark", so after the user picked Dark in settings the document ended up with html.className = "light dark". Harmless in CSS cascade because the dark variables override, but reads as a UI defect in devtools and trips CSS-aware tooling that branches on class lists. Toggle "light" alongside "dark" in applyToDocument so the two classes stay mutually exclusive regardless of how next-themes seeded the initial class. * studio/frontend: shorten theme-toggle comment --------- Co-authored-by: danielhanchen --- .../frontend/src/features/settings/stores/theme-store.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/studio/frontend/src/features/settings/stores/theme-store.ts b/studio/frontend/src/features/settings/stores/theme-store.ts index 1879459a76..f73fc51e1c 100644 --- a/studio/frontend/src/features/settings/stores/theme-store.ts +++ b/studio/frontend/src/features/settings/stores/theme-store.ts @@ -32,7 +32,12 @@ function resolveTheme(theme: Theme): ResolvedTheme { function applyToDocument(resolved: ResolvedTheme) { if (typeof document === "undefined") return; - document.documentElement.classList.toggle("dark", resolved === "dark"); + // Keep "dark"/"light" mutually exclusive. next-themes (via Sonner) + // adds "light" on first mount; without the explicit toggle we'd end + // up with `class="light dark"` after a switch. + const cl = document.documentElement.classList; + cl.toggle("dark", resolved === "dark"); + cl.toggle("light", resolved === "light"); } const listeners = new Set<() => void>();