CAL-1673: Use dark/light colors from user profile settings in booker (#…

…8905)

* CAL-1673: Use dark/light colors from user profile settings in booker

* Use system theme for dynamic booking, instead of theme set by first user.

packages/features/bookings/Booker/Booker.tsx

@@ -5,10 +5,9 @@ import StickyBox from "react-sticky-box";
 import { shallow } from "zustand/shallow";
 
 import classNames from "@calcom/lib/classNames";
-import useGetBrandingColours from "@calcom/lib/getBrandColours";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useMediaQuery from "@calcom/lib/hooks/useMediaQuery";
-import { ToggleGroup, useCalcomTheme } from "@calcom/ui";
+import { ToggleGroup } from "@calcom/ui";
 import { Calendar, Columns, Grid } from "@calcom/ui/components/icon";
 
 import { AvailableTimeSlots } from "./components/AvailableTimeSlots";
@@ -23,20 +22,13 @@ import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from ".
 import { useBookerStore, useInitializeBookerStore } from "./store";
 import type { BookerLayout, BookerProps } from "./types";
 import { useEvent } from "./utils/event";
+import { useBrandColors } from "./utils/use-brand-colors";
 
 const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy"));
 const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), {
   ssr: false,
 });
 
-const useBrandColors = ({ brandColor, darkBrandColor }: { brandColor?: string; darkBrandColor?: string }) => {
-  const brandTheme = useGetBrandingColours({
-    lightVal: brandColor,
-    darkVal: darkBrandColor,
-  });
-  useCalcomTheme(brandTheme);
-};
-
 const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: BookerProps) => {
   const { t } = useLocale();
   const isMobile = useMediaQuery("(max-width: 768px)");
@@ -61,6 +53,7 @@ const BookerComponent = ({ username, eventSlug, month, rescheduleBooking }: Book
   useBrandColors({
     brandColor: event.data?.profile.brandColor,
     darkBrandColor: event.data?.profile.darkBrandColor,
+    theme: event.data?.profile.theme,
   });
 
   useInitializeBookerStore({

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

@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+
+import useGetBrandingColours from "@calcom/lib/getBrandColours";
+import useTheme from "@calcom/lib/hooks/useTheme";
+import { useCalcomTheme } from "@calcom/ui";
+
+export const useBrandColors = ({
+  brandColor,
+  darkBrandColor,
+  theme,
+}: {
+  brandColor?: string;
+  darkBrandColor?: string;
+  theme?: string | null;
+}) => {
+  const brandTheme = useGetBrandingColours({
+    lightVal: brandColor,
+    darkVal: darkBrandColor,
+  });
+  useCalcomTheme(brandTheme);
+  const { setTheme } = useTheme(theme);
+
+  useEffect(() => {
+    if (theme) setTheme(theme);
+  }, [setTheme, theme]);
+};

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -54,6 +54,7 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
           weekStart: true,
           brandColor: true,
           darkBrandColor: true,
+          theme: true,
         },
       },
     },
@@ -80,6 +81,7 @@ export const getPublicEvent = async (username: string, eventSlug: string, prisma
         metadata: true,
         brandColor: true,
         darkBrandColor: true,
+        theme: true,
       },
     });
 
@@ -113,6 +115,7 @@ export const getPublicEvent = async (username: string, eventSlug: string, prisma
         image: `${WEBAPP_URL}/${users[0].username}/avatar.png`,
         brandColor: users[0].brandColor,
         darkBrandColor: users[0].darkBrandColor,
+        theme: null,
       },
     };
   }
@@ -179,6 +182,7 @@ function getProfileFromEvent(event: Event) {
     logo: !team ? undefined : team.logo,
     brandColor: profile.brandColor,
     darkBrandColor: profile.darkBrandColor,
+    theme: profile.theme,
   };
 }