🐛 Fix theme background and font default selection

apps/builder/src/features/theme/components/ThemeTemplateCard.tsx

@@ -74,7 +74,8 @@ export const ThemeTemplateCard = ({
   }
 
   const hostBubbleBgColor =
-    themeTemplate.theme.chat?.hostBubbles ?? defaultTheme.chat.hostBubbles
+    themeTemplate.theme.chat?.hostBubbles?.backgroundColor ??
+    defaultTheme.chat.hostBubbles.backgroundColor
 
   const guestAvatar = {
     isEnabled:
@@ -84,7 +85,8 @@ export const ThemeTemplateCard = ({
   }
 
   const guestBubbleBgColor =
-    themeTemplate.theme.chat?.guestBubbles ?? defaultTheme.chat.guestBubbles
+    themeTemplate.theme.chat?.guestBubbles?.backgroundColor ??
+    defaultTheme.chat.guestBubbles.backgroundColor
 
   const buttonBgColor =
     themeTemplate.theme.chat?.buttons?.backgroundColor ??

apps/builder/src/features/theme/components/general/GeneralSettings.tsx

@@ -9,6 +9,7 @@ import { isFreePlan } from '@/features/billing/helpers/isFreePlan'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { ChangePlanModal } from '@/features/billing/components/ChangePlanModal'
 import { useTranslate } from '@tolgee/react'
+import { defaultTheme } from '@typebot.io/schemas/features/typebot/theme/constants'
 
 type Props = {
   isBrandingEnabled: boolean
@@ -62,11 +63,11 @@ export const GeneralSettings = ({
         />
       </Flex>
       <FontSelector
-        activeFont={generalTheme?.font}
+        activeFont={generalTheme?.font ?? defaultTheme.general.font}
         onSelectFont={handleSelectFont}
       />
       <BackgroundSelector
-        background={generalTheme?.background}
+        background={generalTheme?.background ?? defaultTheme.general.background}
         onBackgroundChange={handleBackgroundChange}
       />
     </Stack>