fix: Embed theme not working using Embed API (#10163)

## What does this PR do?

Fixes #10187
See [Tests Done](https://www.loom.com/share/f03e0191b60143d8b45a505042dbfa11)

## Type of change
  - [x] Bug fix (non-breaking change which fixes an issue)

## How should this be tested?
- [x] Configure embed to use `dark` theme and verify that dark theme is shown on event booking page(when user has light theme set). This is failing in main
- Additional Tests for embed to avoid any new regression
	- [x] - Configure "auto" theme using embed API and see it reacts to system theme
	- [x] - Don't configure any theme and see that "light" theme is shown even when we switch system theme(Because User has configured light theme in App)
-  Tests outside embed to avoid any new regression
	- [x] - See that light theme is shown even after switching system theme
	- [x] - Now, switch the user theme to dark and see that it reflects the change. 

## Mandatory Tasks

 [x] Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

packages/embeds/embed-core/playground.ts

@@ -8,6 +8,16 @@ const callback = function (e) {
 
 const searchParams = new URL(document.URL).searchParams;
 const only = searchParams.get("only");
+const themeInParam = searchParams.get("theme");
+const validThemes = ["light", "dark", "auto"] as const;
+const theme = validThemes.includes((themeInParam as (typeof validThemes)[number]) || "")
+  ? (themeInParam as (typeof validThemes)[number])
+  : null;
+if (themeInParam && !theme) {
+  throw new Error(`Invalid theme: ${themeInParam}`);
+}
+
+const calLink = searchParams.get("cal-link");
 
 if (only === "all" || only === "ns:default") {
   Cal("init", {
@@ -331,7 +341,7 @@ Cal("init", "routingFormDark", {
 
 if (only === "all" || only == "ns:floatingButton") {
   Cal.ns.floatingButton("floatingButton", {
-    calLink: "pro",
+    calLink: calLink || "pro",
     config: {
       iframeAttrs: {
         id: "floatingtest",
@@ -340,7 +350,7 @@ if (only === "all" || only == "ns:floatingButton") {
       email: "johndoe@gmail.com",
       notes: "Test Meeting",
       guests: ["janedoe@example.com", "test@example.com"],
-      theme: "dark",
+      ...(theme ? { theme } : {}),
     },
   });
 }

packages/embeds/embed-core/playwright/tests/action-based.e2e.ts

@@ -44,6 +44,7 @@ async function bookFirstFreeUserEventThroughEmbed({
   return booking;
 }
 
+//TODO: Change these tests to use a user/eventType per embed type atleast. This is so that we can test different themes,layouts configured in App or per EventType
 test.describe("Popup Tests", () => {
   test.afterEach(async () => {
     await deleteAllBookingsByEmail("embed-user@example.com");
@@ -102,56 +103,6 @@ test.describe("Popup Tests", () => {
     });
   });
 
-  test("should open embed iframe on floating button clicked", async ({
-    page,
-    addEmbedListeners,
-    getActionFiredDetails,
-  }) => {
-    const calNamespace = "floatingButton";
-    await addEmbedListeners(calNamespace);
-    await page.goto("/?only=ns:floatingButton");
-
-    await page.click('[data-cal-namespace="floatingButton"] > button');
-
-    const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
-    await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
-      pathname: "/pro",
-    });
-
-    if (!embedIframe) {
-      throw new Error("Embed iframe not found");
-    }
-
-    const { uid: bookingId } = await bookFirstEvent("pro", embedIframe, page);
-    const booking = await getBooking(bookingId);
-
-    expect(booking.attendees.length).toBe(3);
-  });
-
-  test("should open embed iframe with dark theme on floating button clicked", async ({
-    page,
-    addEmbedListeners,
-    getActionFiredDetails,
-  }) => {
-    const calNamespace = "floatingButton";
-    await addEmbedListeners(calNamespace);
-    await page.goto("/?only=ns:floatingButton");
-
-    await page.click('[data-cal-namespace="floatingButton"] > button');
-
-    const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
-    await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
-      pathname: "/pro",
-    });
-
-    if (!embedIframe) {
-      throw new Error("Embed iframe not found");
-    }
-
-    const html = embedIframe.locator("html");
-    await expect(html).toHaveAttribute("class", "dark");
-  });
-
   todo("Add snapshot test for embed iframe");
 
   test("should open Routing Forms embed on click", async ({
@@ -186,4 +137,112 @@ test.describe("Popup Tests", () => {
     });
     await expect(embedIframe.locator("text=Seeded Form - Pro")).toBeVisible();
   });
+
+  test.describe("Floating Button Popup", () => {
+    test.describe("Pro User - Configured in App with default setting of system theme", () => {
+      test("should open embed iframe according to system theme when no theme is configured through Embed API", async ({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      }) => {
+        const calNamespace = "floatingButton";
+        await addEmbedListeners(calNamespace);
+        await page.goto("/?only=ns:floatingButton");
+
+        await page.click('[data-cal-namespace="floatingButton"] > button');
+
+        const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
+        await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
+          pathname: "/pro",
+        });
+
+        if (!embedIframe) {
+          throw new Error("Embed iframe not found");
+        }
+        const html = embedIframe.locator("html");
+        // Expect "light" theme as configured in App for pro user.
+        await expect(html).toHaveAttribute("class", "light");
+        const { uid: bookingId } = await bookFirstEvent("pro", embedIframe, page);
+        const booking = await getBooking(bookingId);
+
+        expect(booking.attendees.length).toBe(3);
+      });
+
+      test("should open embed iframe according to system theme when configured with 'auto' theme using Embed API", async ({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      }) => {
+        const calNamespace = "floatingButton";
+        await addEmbedListeners(calNamespace);
+        await page.goto("/?only=ns:floatingButton");
+
+        await page.click('[data-cal-namespace="floatingButton"] > button');
+
+        const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
+        await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
+          pathname: "/pro",
+        });
+
+        if (!embedIframe) {
+          throw new Error("Embed iframe not found");
+        }
+
+        const html = embedIframe.locator("html");
+        const prefersDarkScheme = await page.evaluate(() => {
+          return window.matchMedia("(prefers-color-scheme: dark)").matches;
+        });
+        // Detect browser preference and expect accordingly
+        await expect(html).toHaveAttribute("class", prefersDarkScheme ? "dark" : "light");
+      });
+
+      test("should open embed iframe(Booker Profile Page) with dark theme when configured with dark theme using Embed API", async ({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      }) => {
+        const calNamespace = "floatingButton";
+        await addEmbedListeners(calNamespace);
+        await page.goto("/?only=ns:floatingButton&theme=dark");
+
+        await page.click('[data-cal-namespace="floatingButton"] > button');
+
+        const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro" });
+        await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
+          pathname: "/pro",
+        });
+
+        if (!embedIframe) {
+          throw new Error("Embed iframe not found");
+        }
+
+        const html = embedIframe.locator("html");
+        await expect(html).toHaveAttribute("class", "dark");
+      });
+
+      test("should open embed iframe(Event Booking Page) with dark theme when configured with dark theme using Embed API", async ({
+        page,
+        addEmbedListeners,
+        getActionFiredDetails,
+      }) => {
+        const calNamespace = "floatingButton";
+        await addEmbedListeners(calNamespace);
+        await page.goto("/?only=ns:floatingButton&cal-link=pro/30min&theme=dark");
+
+        await page.click('[data-cal-namespace="floatingButton"] > button');
+
+        const embedIframe = await getEmbedIframe({ calNamespace, page, pathname: "/pro/30min" });
+        await expect(embedIframe).toBeEmbedCalLink(calNamespace, getActionFiredDetails, {
+          pathname: "/pro/30min",
+        });
+
+        if (!embedIframe) {
+          throw new Error("Embed iframe not found");
+        }
+
+        const html = embedIframe.locator("html");
+        await expect(html).toHaveAttribute("class", "dark");
+      });
+    });
+  });
 });

packages/features/bookings/Booker/utils/use-brand-colors.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-
 import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useCalcomTheme } from "@calcom/ui";
@@ -17,10 +15,7 @@ export const useBrandColors = ({
     lightVal: brandColor,
     darkVal: darkBrandColor,
   });
-  useCalcomTheme(brandTheme);
-  const { setTheme } = useTheme(theme);
 
-  useEffect(() => {
-    if (theme) setTheme(theme);
-  }, [setTheme, theme]);
+  useCalcomTheme(brandTheme);
+  useTheme(theme);
 };

packages/lib/hooks/useTheme.tsx

@@ -2,29 +2,28 @@ import { useTheme as useNextTheme } from "next-themes";
 import { useEffect } from "react";
 
 import { useEmbedTheme } from "@calcom/embed-core/embed-iframe";
-import type { Maybe } from "@calcom/trpc/server";
 
 /**
- * It should be called once per route and only if you want to use app configured theme. System only theme works automatically by using ThemeProvider
- * Calling it without a theme will just returns the current theme.
- * It handles embed configured theme as well.
+ * It should be called once per route if you intend to use a theme different from `system` theme. `system` theme is automatically supported using <ThemeProvider />
+ * If needed you can also set system theme by passing 'system' as `themeToSet`
+ * It handles embed configured theme automatically
+ * To just read the values pass `getOnly` as `true` and `themeToSet` as `null`
  */
-export default function useTheme(themeToSet?: Maybe<string>) {
+// eslint-disable-next-line @typescript-eslint/ban-types
+export default function useTheme(themeToSet: "system" | (string & {}) | undefined | null, getOnly = false) {
   const { resolvedTheme, setTheme, forcedTheme, theme: activeTheme } = useNextTheme();
   const embedTheme = useEmbedTheme();
 
   useEffect(() => {
-    // If themeToSet is not provided the app intends to not apply a specific theme
-    if (!themeToSet) {
-      // But if embedTheme is set then the Embed API intends to apply that theme or it wants "system" theme which is the default
-      setTheme(embedTheme || "system");
+    // Undefined themeToSet allow the hook to be used where the theme is fetched after calling useTheme hook
+    if (getOnly || themeToSet === undefined) {
       return;
     }
 
     // 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;
+    const finalThemeToSet = embedTheme ? (embedTheme === "auto" ? "system" : embedTheme) : themeToSet;
 
     if (!finalThemeToSet || finalThemeToSet === activeTheme) return;
 
@@ -33,10 +32,25 @@ export default function useTheme(themeToSet?: Maybe<string>) {
     // because there might be another booking page with conflicting theme.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [themeToSet, setTheme, embedTheme]);
-  return {
-    resolvedTheme,
-    setTheme,
-    forcedTheme,
-    activeTheme,
-  };
+
+  if (getOnly) {
+    return {
+      resolvedTheme,
+      forcedTheme,
+      activeTheme,
+    };
+  }
+
+  return;
+}
+
+/**
+ * Returns the currently set theme values.
+ */
+export function useGetTheme() {
+  const theme = useTheme(null, true);
+  if (!theme) {
+    throw new Error("useTheme must have a return value here");
+  }
+  return theme;
 }

packages/prisma/seed.ts

@@ -21,6 +21,7 @@ async function createUserAndEventType(opts: {
     completedOnboarding?: boolean;
     timeZone?: string;
     role?: UserPermissionRole;
+    theme?: "dark" | "light";
   };
   eventTypes: Array<
     Prisma.EventTypeCreateInput & {
@@ -218,6 +219,7 @@ async function main() {
       name: "Pro Example",
       password: "pro",
       username: "pro",
+      theme: "light",
     },
     eventTypes: [
       {