From 9ce94fbbfcf8d08cd4e8b7c746ba1aab2f357f2f Mon Sep 17 00:00:00 2001
From: Tushar Bhatt <95581504+TusharBhatt1@users.noreply.github.com>
Date: Mon, 31 Mar 2025 21:18:06 +0530
Subject: [PATCH] fix:theme-flakiness (#20460)

---
 apps/web/playwright/change-theme.e2e.ts | 2 +-
 packages/lib/hooks/useTheme.tsx         | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/playwright/change-theme.e2e.ts b/apps/web/playwright/change-theme.e2e.ts
index dce90bf3da..09b06f006f 100644
--- a/apps/web/playwright/change-theme.e2e.ts
+++ b/apps/web/playwright/change-theme.e2e.ts
@@ -57,7 +57,7 @@ test.describe("Change App Theme Test", () => {
 
     await page.waitForTimeout(3000);
     const themeValue = await page.evaluate(() => localStorage.getItem("app-theme"));
-    expect(themeValue).toBe("system");
+    expect(themeValue).toBe("light");
 
     const systemTheme = await page.evaluate(() => {
       return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
diff --git a/packages/lib/hooks/useTheme.tsx b/packages/lib/hooks/useTheme.tsx
index 54ff7e234b..3c9afa622e 100644
--- a/packages/lib/hooks/useTheme.tsx
+++ b/packages/lib/hooks/useTheme.tsx
@@ -11,7 +11,9 @@ import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default function useTheme(themeToSet: "system" | (string & {}) | undefined | null, getOnly = false) {
-  themeToSet = themeToSet ? themeToSet : "system";
+  if (typeof window !== "undefined") {
+    themeToSet = themeToSet || localStorage.getItem("app-theme") || "system";
+  }
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();