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

@@ -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>

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,