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 SDK's token names.

This article applies to the following implementations:

UI SDKCore SDK

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
SMI.primary#FAFAF9 color light#2B2B26 color darkPrimary branding color
SMI.primaryVariant#706E6B color light#2B2826 color darkVariant of the primary color
SMI.onPrimary#2B2B26 color light#ECEBEA color darkPrimary text color
SMI.secondary#0070D2 color light#007ADD color darkSecondary branding color
SMI.onSecondary#FFFFFF color light#FFFFFF color darkSecondary text color
SMI.secondaryActive#014485 color light#16325C color darkSecondary color for active elements
SMI.secondaryHighlight#062680 color light#6EC4FA color darkSecondary color for highlighted elements
​​SMI.onSecondaryVariant#DDDBDA color light#1A1B1E color darkAlternate secondary text color
SMI.background#F3F2F2 color light#080707 color darkBackground color
SMI.onBackground#706E6B color light#B0ADAB color darkColor for elements on the background color
SMI.surface#FFFFFF color light#1A1B1E color darkPrimary color for surfaces
SMI.onSurface#2B2826 color light#C9C7C5 color darkText color on surfaces
SMI.surfaceHighlight#B3B3B3 color light#66676B color darkHighlight color for surfaces
SMI.surfaceVariant#DDDBDA color light#30373D color darkVariant color for surfaces
SMI.onSurfaceVariant#0070D2 color light#FFFFFF color darkVariant color for surfaces
SMI.surfaceSecondary#CED0D2 color light#30373D color darkSecondary color for surfaces
SMI.tertiary#000000 color light#000000 color darkTertiary branding color
SMI.highlight#FCC003 color light#FCC003 color darkHighlight color
SMI.error#A61A14 color light#D4504C color darkError feedback color
SMI.warning#FFB75D color light#FFB75D color darkWarning feedback color
SMI.success#04844B color light#4BCA81 color darkSuccess feedback color
SMI.transparent(alpha #00) #00FFFF(alpha #00) #00FFFFTransparent color
SMI.backgroundTransparent(alpha #80) #F3F2F2(alpha #80) #080707Transparent background color
SMI.surfaceTransparent(alpha #80) #FFFFFF(alpha #80) #1A1B1ETransparent surface color
SMI.onSecondaryTransparent(alpha #80) #FFFFFF(alpha #80) #FFFFFFTransparent secondary color
SMI.onSecondarySemiTransparent(alpha #99) #FFFFFF(alpha #99) #FFFFFFTransparent color on secondary
SMI.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
HEADER/GENERAL COLORS
SMI.navigationBackgroundprimaryNavigation background color
SMI.navigationTextonPrimaryNavigation text color
SMI.navigationIcononPrimaryNavigation icon color
SMI.chatBackgroundbackgroundChat window background color
SMI.ctaButtonssecondaryCall-to-action button color
SMI.ctaButtonsTextsecondaryCall-to-action text color
SMI.bannerBackgroundonBackgroundBanner background color
SMI.bannerTextbackgroundBanner text color
SMI.imageViewerBackgroundtertiaryImage viewer background color
PRE-CHAT COLORS
SMI.prechatBackgroundbackgroundPre-chat window background color
SMI.prechatBorderonPrimaryBorder color for text input field in pre-chat
SMI.prechatTextonPrimaryText color on pre-chat form
SMI.prechatTextActivesecondaryColor for the active pre-chat cell
SMI.prechatButtonsecondaryPre-chat button color
SMI.prechatButtonActivesecondaryActivePre-chat active button color
SMI.prechatButtonTextonSecondaryPre-chat button text color
SMI.prechatInputBackgroundsurfacePre-chat window background color
SMI.prechatErrorerrorPre-chat error feedback color
SMI.prechatDisabledsurfaceSecondaryDisabled pre-chat field
INPUT COLORS
SMI.inputBackgroundsurfaceBackground color for text input field
SMI.inputBordersurfaceVariantBorder color for text input field
SMI.inputTextonSurfaceText font color when typing a message
SMI.inputPlaceholderonBackgroundPlaceholder text color for the input text field
BUBBLE/CHAT COLORS
SMI.sentBubbleTextonSecondaryText color for an outgoing message bubble
SMI.sentBubbleBackgroundsecondaryBackground color for an outgoing chat bubble
SMI.receivedBubbleTextonSurfaceText color for an incoming message bubble
SMI.receivedBubbleBackgroundsurfaceBackground color for an incoming chat bubble
SMI.receivedBubbleBordersurfaceVariantBorder color for incoming chat bubble
SMI.typingIndicatorTextonBackgroundTyping indicator color
SMI.timestamponBackgroundTimestamp text color
SMI.avatarBackgroundsecondaryAvatar background color
SMI.avatarForegroundonSecondaryAvatar foreground color
SMI.chatSeperatoronBackgroundSemiTransparentChat separator color
CARD COLORS
SMI.cardBackgroundprimaryBackground color for a card
SMI.cardBorderprimaryVariantBorder color for a card
SMI.cardHeadlineTextonPrimaryHeadline text for a card
SMI.cardSubheaderTextprimaryVariantSubheader text for a card
ICON COLORS
SMI.iconForegroundonSecondaryIcon foreground color
SMI.iconBackgroundsecondaryIcon background color
SMI.iconBackgroundSecondaryonBackgroundIcon secondary background color
SMI.iconDisabledonBackgroundIcon disabled color
BUTTON COLORS
SMI.buttonTextonSurfaceVariantButton text color
SMI.buttonBackgroundsurfaceButton background color
SMI.buttonBordersurfaceVariantButton border color
SMI.buttonFocusTextsurfaceFocus text color
SMI.buttonFocusBackgroundonSurfaceVariantFocus text background color
SMI.buttonDisabledTextonBackgroundDisabled text color
SMI.buttonDisabledBackgroundonSurfaceVariantDisabled text background color
SMI.listPickerTitleTextonSurfaceList picker title text color
SMI.cancelButtonActive​​onSecondaryCancel button active color
SMI.cancelButtonBgActive​​onBackgroundCancel button active background color
SMI.cancelButtonPressed​​onSecondaryCancel button pressed color
SMI.cancelButtonBgPressed​​secondaryActiveCancel button pressed background color
MESSAGE SEARCH COLORS
SMI.messageSearchInputBaronBackgroundSemiTransparentSearch input bar color
SMI.messageSearchHighlightBorderAgenthighlightHighlighted border color for agent
SMI.messageSearchHighlightBorderUserhighlightHighlighted border color for user
SMI.messageSearchHighlightTextAgentprimaryHighlighted text color for agent
SMI.messageSearchHighlightTextUserprimaryHighlighted text color for user
SMI.messageSearchHighlightBackgroundAgentsurfaceHighlightHiglighted background color for agent
SMI.messageSearchHighlightBackgroundUsersecondaryHighlightHiglighted background color for user
CAMERA COLORS
SMI.cameraButtonActive​​onSecondaryCamera button active color
SMI.cameraButtonBgActive​​onSecondaryTransparentCamera button active background color
SMI.cameraButtonFocused​​secondaryCamera button focused color
SMI.cameraButtonBgFocused​​onSecondarySemiTransparentCamera button focused background color
SMI.cameraButtonPressed​​onSecondaryCamera button pressed color
SMI.cameraButtonBgPressed​​onSecondaryCamera button pressed background color
LOADING SCREEN COLORS
SMI.loadingScreenTextPlaceholdersurfaceSecondaryLoading screen placeholder text color
SMI.loadingScreenSentBubbleBackgroundsurfaceSecondaryLoading screen sent bubble background color
SMI.loadingScreenReceivedBubbleBackgroundonBackgroundLoading screen received bubble background color
SMI.loadingScreenAvataronBackgroundLoading screen avatar color
SMI.loadingScreenBackgroundbackgroundLoading screen background color
SMI.loadingScreenInputTextPlaceholdersurfaceSecondaryLoading screen input text placeholder color