CAL-1892: Show booker layout dark mode preview based on theme the user selects (#9664)

apps/web/components/eventtype/EventAdvancedTab.tsx

@@ -38,6 +38,7 @@ const generateHashedLink = (id: number) => {
 
 export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps, "eventType" | "team">) => {
   const connectedCalendarsQuery = trpc.viewer.connectedCalendars.useQuery();
+  const { data: user } = trpc.viewer.me.useQuery();
   const formMethods = useFormContext<FormValues>();
   const { t } = useLocale();
 
@@ -49,6 +50,9 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const bookingFields: Prisma.JsonObject = {};
 
   const workflows = eventType.workflows.map((workflowOnEventType) => workflowOnEventType.workflow);
+  const selectedThemeIsDark =
+    user?.theme === "dark" ||
+    (!user?.theme && typeof document !== "undefined" && document.documentElement.classList.contains("dark"));
 
   eventType.bookingFields.forEach(({ name }) => {
     bookingFields[name] = name + " input";
@@ -162,7 +166,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
       </div>
       <hr className="border-subtle [&:has(+div:empty)]:hidden" />
       <div>
-        <BookerLayoutSelector fallbackToUserSettings />
+        <BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} />
       </div>
       <hr className="border-subtle" />
       <FormBuilder

apps/web/pages/settings/my-account/appearance.tsx

@@ -70,6 +70,13 @@ const AppearanceView = () => {
     },
   });
 
+  const selectedTheme = formMethods.watch("theme");
+  const selectedThemeIsDark =
+    selectedTheme === "dark" ||
+    (selectedTheme === "" &&
+      typeof document !== "undefined" &&
+      document.documentElement.classList.contains("dark"));
+
   const {
     formState: { isSubmitting, isDirty },
     reset,
@@ -144,6 +151,7 @@ const AppearanceView = () => {
 
       <hr className="border-subtle my-8 border [&:has(+hr)]:hidden" />
       <BookerLayoutSelector
+        isDark={selectedThemeIsDark}
         name="metadata.defaultBookerLayouts"
         title={t("bookerlayout_user_settings_title")}
         description={t("bookerlayout_user_settings_description")}

packages/features/settings/BookerLayoutSelector.tsx

@@ -23,6 +23,13 @@ type BookerLayoutSelectorProps = {
    * settings.
    */
   fallbackToUserSettings?: boolean;
+  /**
+   * isDark boolean should be passed in when the user selected 'dark mode' in the theme settings in profile/appearance.
+   * So it's not based on the user's system settings, but on the user's preference for the booker.
+   * This boolean is then used to show a dark version of the layout image. It's only easthetic, no functionality is attached
+   * to this boolean.
+   */
+  isDark?: boolean;
 };
 
 const defaultFieldName = "metadata.bookerLayouts";
@@ -32,6 +39,7 @@ export const BookerLayoutSelector = ({
   description,
   name,
   fallbackToUserSettings,
+  isDark,
 }: BookerLayoutSelectorProps) => {
   const { control, getValues } = useFormContext();
   const { t } = useLocale();
@@ -58,6 +66,7 @@ export const BookerLayoutSelector = ({
             showUserSettings={shouldShowUserSettings}
             settings={value}
             onChange={onChange}
+            isDark={isDark}
           />
         )}
       />
@@ -69,11 +78,12 @@ type BookerLayoutFieldsProps = {
   settings: BookerLayoutSettings;
   onChange: (settings: BookerLayoutSettings) => void;
   showUserSettings: boolean;
+  isDark?: boolean;
 };
 
 type BookerLayoutState = { [key in BookerLayouts]: boolean };
 
-const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayoutFieldsProps) => {
+const BookerLayoutFields = ({ settings, onChange, showUserSettings, isDark }: BookerLayoutFieldsProps) => {
   const { t } = useLocale();
   const { isLoading: isUserLoading, data: user } = useMeQuery();
   const [isOverridingSettings, setIsOverridingSettings] = useState(false);
@@ -143,7 +153,7 @@ const BookerLayoutFields = ({ settings, onChange, showUserSettings }: BookerLayo
             <label>
               <img
                 className="mb-3 w-full max-w-none cursor-pointer"
-                src={`/bookerlayout_${layout}.svg`}
+                src={`/bookerlayout_${layout}${isDark ? "_dark" : ""}.svg`}
                 alt="Layout preview"
               />
               <Checkbox