Skip to content
Theming

iOS SDK

Theme the iOS SDK

Match customer messages, feedback, notifications, and empty states to the host application.

Apply one theme across SDK surfaces

Pass the same BTXTheme to Messenger and Community options to keep the two surfaces visually aligned. Messenger's theme also applies to its feedback composer, foreground notifications, attachment previews, and empty state. On iOS 26, SDK sheets use Liquid Glass; earlier supported versions use a native material treatment. Supplying only artwork or typography preserves the default colors and controls.

When BTXCommunityOptions.theme is nil, Community uses the default SDK theme.

The configured logo, heading, and subtitle are centered on the conversation history landing screen. Context-card labels appear above their values to support long or wrapped content.

App theme
let appTheme = BTXTheme(
    emptyStateLogo: .init(assetName: "AcmeWordmark"),
    emptyStateLogoMaxWidth: 180,
    backgroundColor: Color(red: 0.98, green: 1.0, blue: 0.95),
    surfaceColor: Color(red: 0.96, green: 0.91, blue: 0.84),
    primaryTextColor: Color(red: 0.19, green: 0.17, blue: 0.13),
    secondaryTextColor: Color(red: 0.51, green: 0.48, blue: 0.39),
    primaryCTAColor: Color(red: 0.43, green: 0.38, blue: 0.25),
    primaryCTATextColor: .white,
    primaryCTAStyle: .solid
)

BTX.configure(
    BTXConfiguration(
        publishableClientKey: "cfk_...",
        features: [.messenger, .community],
        messengerOptions: BTXMessengerOptions(
            title: "Chat with Acme Team",
            appName: "Acme",
            theme: appTheme
        ),
        communityOptions: BTXCommunityOptions(
            title: "Acme Community",
            teamDisplayName: "Acme team",
            theme: appTheme
        )
    )
)
01

Keep controls and text legible

Set explicit text and control colors whenever you override a surface. BTX applies contrast safeguards to supported history-row colors, but you should still test the messenger over real light and dark content.

Message bubble fills are composited over the configured messenger background and rendered opaquely, so host content cannot show through the bubbles. Keep explicit bubble text colors high contrast with their configured fills.

  • Match the host background and primary accent first.
  • Use deliberate logo bounds so branding does not dominate the empty state.
  • Choose solid CTAs when glass or gradients conflict with the host design language.
  • Verify foreground notification text over real app content.
02

Choose an appearance mode

BTXTheme.colorScheme supports .system, .light, and .dark. Use .system when your app follows device appearance, or choose a fixed mode when your palette does not change.

In 2.3.0 or later, use BTXTheme.light or BTXTheme.dark for a ready-made palette, or BTXTheme(palette:) with a BTXThemePalette containing background, surface, primaryText, secondaryText, accent, and accentForeground. The detailed initializer remains available for individual overrides.

The SDK derives defaults for controls and text you do not override. Sheet materials remain clear and use blur for separation; semantic surface colors style inner cards and fields. Foreground notifications also default to clear glass without a color wash. Set foregroundNotificationMaterialOpacity and foregroundNotificationGlassStyle explicitly when your app needs a colored or regular-glass banner.