Fix for booker colors in dark mode, we can't use bg-default in both places because we use a custom background in dark mode. Otherwise it would be a similar color in dark. So we need to supply a custom dark mode color. (#9259)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

packages/features/bookings/Booker/Booker.tsx

@@ -103,7 +103,7 @@ const BookerComponent = ({
         since that's not a valid option, so it would set the layout to null.
       */}
       {!isMobile && (
-        <div className="[&>div]:bg-default fixed top-2 right-3 z-10">
+        <div className="[&>div]:bg-default dark:[&>div]:bg-muted fixed top-2 right-3 z-10">
           <ToggleGroup
             onValueChange={onLayoutToggle}
             defaultValue={layout}
@@ -133,7 +133,7 @@ const BookerComponent = ({
           className={classNames(
             // Sets booker size css variables for the size of all the columns.
             ...getBookerSizeClassNames(layout, bookerState),
-            "bg-default grid max-w-full auto-rows-fr items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
+            "bg-default dark:bg-muted grid max-w-full auto-rows-fr items-start overflow-clip dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row",
             layout === "small_calendar" && "border-subtle rounded-md border"
           )}>
           <AnimatePresence>

packages/features/bookings/Booker/components/BookEventForm/BookFormAsModal.tsx

@@ -20,7 +20,7 @@ export function BookFormAsModal({ visible, onCancel }: { visible: boolean; onCan
       <DialogContent
         type={undefined}
         enableOverflow
-        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
+        className="[&_.modalsticky]:border-t-subtle [&_.modalsticky]:bg-default dark:[&_.modalsticky]:bg-muted max-h-[80vh] pt-6 pb-0 [&_.modalsticky]:sticky [&_.modalsticky]:bottom-0 [&_.modalsticky]:left-0 [&_.modalsticky]:right-0 [&_.modalsticky]:-mx-8 [&_.modalsticky]:border-t [&_.modalsticky]:px-6 [&_.modalsticky]:py-4">
         <h1 className="font-cal text-emphasis text-xl leading-5">{t("confirm_your_details")} </h1>
         <div className="mt-4 flex space-x-2 rounded-md leading-none">
           <Badge variant="grayWithoutHover" startIcon={Calendar} size="lg">

packages/features/bookings/Booker/components/LargeCalendar.tsx

@@ -11,7 +11,7 @@ export const LargeCalendar = () => {
   );
 
   return (
-    <div className="bg-default flex h-full w-full flex-col items-center justify-center">
+    <div className="bg-default dark:bg-muted flex h-full w-full flex-col items-center justify-center">
       Something big is coming...
       <br />
       <button

packages/features/bookings/Booker/components/Unavailable.tsx

@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
   <div className="mx-auto w-full max-w-2xl">
-    <div className="border-subtle bg-default overflow-hidden rounded-lg border p-10">
+    <div className="border-subtle bg-default dark:bg-muted overflow-hidden rounded-lg border p-10">
       <h2 className="font-cal mb-4 text-3xl">{title}</h2>
       {children}
     </div>

packages/features/bookings/components/AvailableTimes.tsx

@@ -39,7 +39,7 @@ export const AvailableTimes = ({
 
   return (
     <div className={classNames("text-default", className)}>
-      <header className="bg-muted before:bg-muted mb-5 flex w-full flex-row items-center font-medium">
+      <header className="bg-default before:bg-default dark:bg-muted dark:before:bg-muted mb-5 flex w-full flex-row items-center font-medium">
         <span className={classNames(isLargeTimeslots && "w-full text-center")}>
           <span className="text-emphasis font-semibold">
             {nameOfDay(i18n.language, Number(date.format("d")), "short")}