Customize Colors for iOS

The UI SDK automatically brands the app with a default color scheme. You can customize this color scheme in your app by creating color sets in your Assets catalog using the exact same token names.

Test any color customizations in light and dark mode.

You can customize colors using generic branding tokens such as “primary color” or “secondary color.” Or you can customize each individual element in the UI using detailed branding tokens such as “sent bubble background color.”

The generic tokens are better if you want to update the colors across the entire app with just a few changes. The detailed tokens are better if you want full control over the colors for each UI element. When you modify the detailed tokens, it overrides the generic branding token colors for the specific elements that you modify.

Generic branding tokens Generic branding tokens for pre-chat

Use these tokens to adjust the colors of the app to match your product's brand.

KeywordDefault Light ColorDefault Dark ColorDescription
primary#FAFAF9 color light#2B2B26 color darkPrimary branding color
primaryVariant#706E6B color light#2B2826 color darkVariant of the primary color
onPrimary#2B2B26 color light#ECEBEA color darkPrimary text color
secondary#0070D2 color light#007ADD color darkSecondary branding color
onSecondary#FFFFFF color light#FFFFFF color darkSecondary text color
secondaryActive#014485 color light#16325C color darkSecondary color for active elements
background#F3F2F2 color light#080707 color darkBackground color
onBackground#706E6B color light#B0ADAB color darkColor for elements on the background color
surface#FFFFFF color light#1A1B1E color darkPrimary color for surfaces
onSurface#2B2826 color light#C9C7C5 color darkText color on surfaces
surfaceVariant#DDDBDA color light#30373D color darkVariant color for surfaces
onSurfaceVariant#0070D2 color light#FFFFFF color darkVariant color for surfaces
surfaceSecondary#CED0D2 color light#30373D color darkSecondary color for surfaces
tertiary#000000 color light#000000 color darkTertiary branding color
error#A61A14 color light#D4504C color darkError feedback color
warning#FFB75D color light#FFB75D color darkWarning feedback color
success#04844B color light#4BCA81 color darkSuccess feedback color
transparent(alpha #00) #00FFFF(alpha #00) #00FFFFTransparent color
backgroundTransparent(alpha #80) #F3F2F2(alpha #80) #080707Transparent background color
surfaceTransparent(alpha #80) #FFFFFF(alpha #80) #1A1B1ETransparent surface color
onSecondaryTransparent(alpha #80) #FFFFFF(alpha #80) #FFFFFFTransparent secondary color
onSecondarySemiTransparent(alpha #99) #FFFFFF(alpha #99) #FFFFFFTransparent color on secondary
onBackgroundSemiTransparent(alpha: #80) #706E6B(alpha: #80) #B0ADABSemi-transparent color for elements on the background color

Use these tokens if you want to configure specific elements of the app. When you change any of these detailed branding token values, it overrides the generic token used by that element.

Detailed TokenGeneric TokenDescription
navigationBackgroundprimaryNavigation background color
navigationTextonPrimaryNavigation text color
navigationIcononPrimaryNavigation icon color
chatBackgroundbackgroundChat window background color
ctaButtonssecondaryCall-to-action button color
bannerBackgroundonBackgroundBanner background color
bannerTextbackgroundBanner text color
imageViewerBackgroundtertiaryImage viewer background color
prechatBackgroundbackgroundPre-chat window background color
prechatBorderonPrimaryBorder color for text input field in pre-chat
prechatTextonPrimaryText color on pre-chat form
prechatTextActivesecondaryColor for the active pre-chat cell
prechatButtonsecondaryPre-chat button color
prechatButtonActivesecondaryActivePre-chat active button color
prechatButtonTextonSecondaryPre-chat button text color
prechatInputBackgroundsurfacePre-chat window background color
prechatErrorerrorPre-chat error feedback color
prechatDisabledsurfaceSecondaryDisabled pre-chat field
inputBackgroundsurfaceBackground color for text input field
inputBordersurfaceVariantBorder color for text input field
inputTextonSurfaceText font color when typing a message
inputPlaceholderonBackgroundPlaceholder text color for the input text field
sentBubbleTextonSecondaryText color for an outgoing message bubble
sentBubbleBackgroundsecondaryBackground color for an outgoing chat bubble
receivedBubbleTextonSurfaceText color for an incoming message bubble
receivedBubbleBackgroundsurfaceBackground color for an incoming chat bubble
receivedBubbleBordersurfaceVariantBorder color for incoming chat bubble
typingIndicatorTextonBackgroundTyping indicator color
timestamponBackgroundTimestamp text color
avatarBackgroundsecondaryAvatar background color
avatarForegroundonSecondaryAvatar foreground color
chatSeperatoronBackgroundSemiTransparentChat separator color
cardBackgroundprimaryBackground color for a card
cardBorderprimaryVariantBorder color for a card
cardHeadlineTextonPrimaryHeadline text for a card
cardSubheaderTextprimaryVariantSubheader text for a card
iconForegroundonSecondaryIcon foreground color
iconBackgroundsecondaryIcon background color
iconDisabledonBackgroundIcon disabled color
buttonTextonSurfaceVariantButton text color
buttonBackgroundsurfaceButton background color
buttonBordersurfaceVariantButton border color
buttonFocusTextsurfaceFocus text color
buttonFocusBackgroundonSurfaceVariantFocus text background color
buttonDisabledTextonBackgroundDisabled text color
buttonDisabledBackgroundonSurfaceVariantDisabled text background color
listPickerTitleTextonSurfaceList picker title text color
cancelButtonActive​​onSecondaryCancel button active color
cancelButtonBgActive​​onBackgroundCancel button active background color
cancelButtonPressed​​onSecondaryCancel button pressed color
cancelButtonBgPressed​​secondaryActiveCancel button pressed background color
cameraButtonActive​​onSecondaryCamera button active color
cameraButtonBgActive​​onSecondaryTransparentCamera button active background color
cameraButtonFocused​​secondaryCamera button focused color
cameraButtonBgFocused​​onSecondarySemiTransparentCamera button focused background color
cameraButtonPressed​​onSecondaryCamera button pressed color
cameraButtonBgPressed​​onSecondaryCamera button pressed background color
loadingScreenTextPlaceholdersurfaceSecondaryLoading screen placeholder text color
loadingScreenSentBubbleBackgroundsurfaceSecondaryLoading screen sent bubble background color
loadingScreenReceivedBubbleBackgroundonBackgroundLoading screen received bubble background color
loadingScreenAvataronBackgroundLoading screen avatar color
loadingScreenBackgroundbackgroundLoading screen background color
loadingScreenInputTextPlaceholdersurfaceSecondaryLoading screen input text placeholder color