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>();