From c0cd3a506c097014e1461b3b0bd776feb150d165 Mon Sep 17 00:00:00 2001
From: Etherll <61019402+Etherll@users.noreply.github.com>
Date: Wed, 17 Jun 2026 19:35:14 +0300
Subject: [PATCH] Use system theme and apply theme on mount (#6405)

Set ThemeProvider defaultTheme to "system" and enable system preference so the app follows the OS theme. In the theme store, apply the resolved theme to the document immediately on mount so the store is the single source of truth and avoids an initial light flash on fresh origins (e.g. empty localStorage). Minor comment and formatting tweaks in setTheme were also made.

Co-authored-by: Lee Jackson <130007945+Imagineer99@users.noreply.github.com>
---
 studio/frontend/src/app/provider.tsx                   |  2 +-
 .../src/features/settings/stores/theme-store.ts        | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/app/provider.tsx b/studio/frontend/src/app/provider.tsx
index 39e04843a9..29644d04cf 100644
--- a/studio/frontend/src/app/provider.tsx
+++ b/studio/frontend/src/app/provider.tsx
@@ -335,7 +335,7 @@ function TauriWrapper({ children }: { children: ReactNode }) {
 
 export function AppProvider({ children }: AppProviderProps) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="light">
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <TooltipProvider>
         <TauriWrapper>
           {children}
diff --git a/studio/frontend/src/features/settings/stores/theme-store.ts b/studio/frontend/src/features/settings/stores/theme-store.ts
index 9d05582c77..6a1275fb6f 100644
--- a/studio/frontend/src/features/settings/stores/theme-store.ts
+++ b/studio/frontend/src/features/settings/stores/theme-store.ts
@@ -50,6 +50,12 @@ function subscribe(cb: () => void) {
     applyToDocument(resolveTheme(readStoredTheme()));
     cb();
   };
+  // Apply on mount so this store is the single source of truth for the DOM
+  // class. Without this, initial paint depends solely on next-themes, which on
+  // a fresh origin (e.g. a new Cloudflare --secure link with empty
+  // localStorage) falls back to its own default and shows light while the
+  // control still reads "system".
+  applyToDocument(resolveTheme(readStoredTheme()));
   const onStorage = (e: StorageEvent) => {
     if (e.key === STORAGE_KEY || e.key === null) syncTheme();
   };
@@ -77,8 +83,8 @@ function getServerSnapshot(): Theme {
  */
 export function setTheme(next: Theme): void {
   if (typeof window === "undefined") return;
-  // Persist "system" explicitly so next-themes (defaultTheme="light")
-  // doesn't clobber the choice on reload.
+  // Persist "system" explicitly so next-themes doesn't clobber the choice on
+  // reload.
   try {
     window.localStorage.setItem(STORAGE_KEY, next);
   } catch {