Fix: Embed - Auto theme configured using embed config doesn't work when there is non-system theme configured in appearance. (#9030)

* Differentiate b/w auto theme and unspecified theme

* Fix TS

packages/embeds/embed-core/playground.ts

@@ -55,6 +55,7 @@ if (only === "all" || only === "ns:second") {
         iframeAttrs: {
           id: "cal-booking-place-second-iframe",
         },
+        theme: "auto",
       },
     },
   ]);

packages/embeds/embed-core/src/embed-iframe.ts

@@ -8,10 +8,10 @@ import type { Message } from "./embed";
 import { sdkActionManager } from "./sdk-event";
 
 type Theme = "dark" | "light";
-
+export type EmbedThemeConfig = Theme | "auto";
 export type UiConfig = {
   hideEventTypeDetails?: boolean;
-  theme?: Theme | "auto";
+  theme?: EmbedThemeConfig;
   styles?: EmbedStyles & EmbedNonStylesConfig;
   //TODO: Extract from tailwind the list of all custom variables and support them in auto-completion as well as runtime validation. Followup with listing all variables in Embed Snippet Generator UI.
   cssVarsPerTheme?: Record<Theme, Record<string, string>>;
@@ -31,7 +31,7 @@ const embedStore = {
   reactNonStylesStateSetters: {} as Record<keyof EmbedNonStylesConfig, setNonStylesConfig>,
   parentInformedAboutContentHeight: false,
   windowLoadEventFired: false,
-  setTheme: undefined as ((arg0: string) => void) | undefined,
+  setTheme: undefined as ((arg0: EmbedThemeConfig) => void) | undefined,
   theme: undefined as UiConfig["theme"],
   uiConfig: undefined as Omit<UiConfig, "styles" | "theme"> | undefined,
   setUiConfig: undefined as ((arg0: UiConfig) => void) | undefined,
@@ -170,14 +170,14 @@ function isValidNamespace(ns: string | null | undefined) {
 
 export const useEmbedTheme = () => {
   const router = useRouter();
-  const [theme, setTheme] = useState(embedStore.theme || (router.query.theme as string));
+  const [theme, setTheme] = useState(embedStore.theme || (router.query.theme as typeof embedStore.theme));
   useEffect(() => {
     router.events.on("routeChangeComplete", () => {
       sdkActionManager?.fire("__routeChanged", {});
     });
   }, [router.events]);
   embedStore.setTheme = setTheme;
-  return theme === "auto" ? null : theme;
+  return theme;
 };
 
 export const useEmbedUiConfig = () => {
@@ -434,7 +434,7 @@ if (isBrowser) {
   // Exposes certain global variables/fns that are used by the app to get interface with the embed.
   embedInit();
   const url = new URL(document.URL);
-  embedStore.theme = (window?.getEmbedTheme?.() || "auto") as UiConfig["theme"];
+  embedStore.theme = window?.getEmbedTheme?.() as UiConfig["theme"];
   if (url.searchParams.get("prerender") !== "true" && window?.isEmbed?.()) {
     log("Initializing embed-iframe");
     // HACK

packages/embeds/embed-core/src/embed.ts

@@ -2,7 +2,7 @@
 import { FloatingButton } from "./FloatingButton/FloatingButton";
 import { Inline } from "./Inline/inline";
 import { ModalBox } from "./ModalBox/ModalBox";
-import type { InterfaceWithParent, interfaceWithParent, UiConfig } from "./embed-iframe";
+import type { InterfaceWithParent, interfaceWithParent, UiConfig, EmbedThemeConfig } from "./embed-iframe";
 import css from "./embed.css";
 import type { EventData, EventDataMap } from "./sdk-action-manager";
 import { SdkActionManager } from "./sdk-action-manager";
@@ -129,6 +129,7 @@ type PrefillAndIframeAttrsConfig = Record<string, string | string[] | Record<str
   iframeAttrs?: Record<string, string> & {
     id?: string;
   };
+  theme?: EmbedThemeConfig;
 };
 
 export class Cal {

packages/lib/hooks/useTheme.tsx

@@ -21,8 +21,10 @@ export default function useTheme(themeToSet?: Maybe<string>) {
       return;
     }
 
-    // Embed theme takes precedence over theme configured in app. If embedTheme isn't set that is it's in 'Auto' mode, then it would use the theme configured in appearance.
-    const finalThemeToSet = embedTheme || themeToSet;
+    // Embed theme takes precedence over theme configured in app.
+    // If embedTheme isn't set i.e. it's not explicitly configured with a theme, then it would use the theme configured in appearance.
+    // If embedTheme is set to "auto" then we consider it as null which then uses system theme.
+    const finalThemeToSet = embedTheme ? (embedTheme === "auto" ? null : embedTheme) : themeToSet;
 
     if (!finalThemeToSet || finalThemeToSet === activeTheme) return;