From c38dd2d072db1822ab75cf8910df483b6dba465f Mon Sep 17 00:00:00 2001
From: Hariom Balhara <hariombalhara@gmail.com>
Date: Thu, 20 Apr 2023 17:27:28 +0530
Subject: [PATCH] Hotfix: Fix theme not changing once page has started loading
 (#8400)

* Fix theme not changing once page is loaded

* Add toggle case in playground
---
 packages/embeds/embed-core/index.html | 2 ++
 packages/lib/hooks/useTheme.tsx       | 4 +---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index 03b560959d..cd7e1396ff 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -161,6 +161,8 @@
         <h3>
           <a href="?only=ns:default">[Dark Theme][Guests(janedoe@example.com and test@example.com)]</a>
         </h3>
+        <button onclick="Cal('ui',{theme:'light'})" >Toggle to Light</button>
+
         <i class="last-action"> You would see last Booking page action in my place </i>
         <div>
           <div class="place" style="width: 100%"></div>
diff --git a/packages/lib/hooks/useTheme.tsx b/packages/lib/hooks/useTheme.tsx
index fc7f66d808..8dab7f1c16 100644
--- a/packages/lib/hooks/useTheme.tsx
+++ b/packages/lib/hooks/useTheme.tsx
@@ -22,10 +22,8 @@ export default function useTheme(themeToSet?: Maybe<string>) {
 
     if (!finalThemeToSet || finalThemeToSet === activeTheme) return;
 
-    console.log("Setting theme", { resolvedTheme, finalThemeToSet, activeTheme, forcedTheme });
     setTheme(finalThemeToSet);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- we do not want activeTheme to re-render this effect
-  }, [themeToSet, setTheme]);
+  }, [themeToSet, setTheme, embedTheme, activeTheme]);
 
   return {
     resolvedTheme,