Customize Colors for Android

The UI SDK automatically brands the app with a default color scheme. You can customize this color scheme in your app by creating a color resource file in your app and using the token names specified in this section.

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_color_primary#FAFAF9 color light#2B2B26 color darkPrimary branding color
​​smi_color_primary_variant#706E6B color light#2B2826 color darkVariant of the primary color
​​smi_color_on_primary#2B2B26 color light#ECEBEA color darkPrimary text color
​​smi_color_secondary#0070D2 color light#007ADD color darkSecondary branding color
​​smi_color_on_secondary#FFFFFF color light#FFFFFF color darkSecondary text color
​​smi_color_secondary_active#014485 color light#16325C color darkSecondary color for active elements
smi_color_secondary_highlight#062680 color light#6EC4FA color darkSecondary color for highlighted elements
​​smi_color_on_secondary_variant#DDDBDA color light#1A1B1E color darkAlternate secondary text color
​​smi_color_background#F3F2F2 color light#080707 color darkBackground color
​​smi_color_on_background#706E6B color light#B0ADAB color darkColor for elements on the background color
​​smi_color_surface#FFFFFF color light#1A1B1E color darkPrimary color for surfaces
​​smi_color_on_surface#2B2826 color light#C9C7C5 color darkText color on surfaces
​​smi_color_surface_highlight#B3B3B3 color light#66676B color darkHighlight color for surfaces
​​smi_color_surface_variant#DDDBDA color light#30373D color darkVariant color for surfaces
​​smi_color_on_surface_variant#0070D2 color light#FFFFFF color darkVariant color for surfaces
smi_color_surface_secondary#CED0D2 color light#30373D color darkSecondary color for surfaces
smi_color_tertiary#000000 color light#000000 color darkTertiary branding color
smi_color_highlight#FCC003 color light#FCC003 color darkHighlight color
​​smi_color_error#A61A14 color light#D4504C color darkError feedback color
​​smi_color_warning#FFB75D color light#FFB75D color darkWarning feedback color
​​smi_color_success#04844B color light#4BCA81 color darkSuccess feedback color
smi_color_transparent(alpha #00) #00FFFF(alpha #00) #00FFFFTransparent color
smi_color_background_transparent(alpha #80) #F3F2F2(alpha #80) #080707Transparent background color
smi_color_surface_transparent(alpha #80) #FFFFFF(alpha #80) #1A1B1ETransparent surface color
smi_color_on_secondary_transparent(alpha #80) #FFFFFF(alpha #80) #FFFFFFTransparent secondary color
smi_color_on_secondary_semi_transparent(alpha #99) #FFFFFF(alpha #99) #FFFFFFTransparent color on secondary
smi_color_on_background_semi_transparent(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_navigation_background​​smi_color_primaryNavigation background color
smi_navigation_text​​smi_color_on_primaryNavigation text color
smi_navigation_iconsmi_color_on_primaryNavigation icon color
smi_chat_background​​smi_color_backgroundChat window background color
smi_cta_buttons​​smi_color_secondaryCall-to-action button color
smi_cta_buttons_textsecondaryCall-to-action text color
smi_banner_background​​smi_color_on_backgroundBanner background color
smi_banner_text​​smi_color_backgroundBanner text color
smi_image_viewer_backgroundsmi_color_tertiaryImage viewer background color
PRE-CHAT COLORS
smi_prechat_background​​smi_color_backgroundPre-chat window background color
smi_prechat_border​​smi_color_on_primaryBorder color for text input field in pre-chat
smi_prechat_text​​smi_color_on_primaryText color on pre-chat form
smi_prechat_text_active​​smi_color_secondaryColor for the active pre-chat cell
smi_prechat_button​​smi_color_secondaryPre-chat button color
smi_prechat_button_active​​smi_color_secondary_activePre-chat active button color
smi_prechat_button_text​​smi_color_on_secondaryPre-chat button text color
smi_prechat_input_background​​smi_color_surfacePre-chat window background color
smi_prechat_error​​smi_color_errorPre-chat error feedback color
smi_prechat_disabledsmi_color_surface_secondaryDisabled pre-chat field
INPUT COLORS
smi_input_background​​smi_color_surfaceBackground color for text input field
smi_input_border​​smi_color_surface_variantBorder color for text input field
smi_input_text​​smi_color_on_surfaceText font color when typing a message
smi_input_placeholder​​smi_color_on_backgroundPlaceholder text color for the input text field
BUBBLE/CHAT COLORS
smi_sent_bubble_text​​smi_color_on_secondaryText color for an outgoing message bubble
smi_sent_bubble_background​​smi_color_secondaryBackground color for an outgoing chat bubble
smi_received_bubble_text​​smi_color_on_surfaceText color for an incoming message bubble
smi_received_bubble_background​​smi_color_surfaceBackground color for an incoming chat bubble
smi_received_bubble_border​​smi_color_surface_variantBorder color for incoming chat bubble
smi_typing_indicator_text​​smi_color_on_backgroundTyping indicator color
smi_timestamp​​smi_color_on_backgroundTimestamp text color
smi_avatar_background​​smi_color_secondaryAvatar background color
smi_avatar_foreground​​smi_color_on_secondaryAvatar foreground color
smi_chat_separatorsmi_color_on_background_semi_transparentChat separator color
CARD COLORS
smi_card_background​​smi_color_primaryBackground color for a card
smi_card_border​​smi_color_primary_variantBorder color for a card
smi_card_headline_text​​smi_color_on_primaryHeadline text for a card
smi_card_subheader_text​​smi_color_primary_variantSubheader text for a card
ICON COLORS
smi_icon_foreground​​smi_color_on_secondaryIcon foreground color
smi_icon_background​​smi_color_secondaryIcon background color
smi_icon_background_secondarysmi_color_on_backgroundIcon secondary background color
smi_icon_disabled​​smi_color_on_backgroundIcon disabled color
BUTTON COLORS
smi_button_text​​smi_color_on_surface_variantButton text color
smi_button_background​​smi_color_surfaceButton background color
smi_button_border​​smi_color_surface_variantButton border color
smi_button_focus_text​​smi_color_surfaceFocus text color
smi_button_focus_background​​smi_color_on_surface_variantFocus text background color
smi_button_disabled_text​​smi_color_on_backgroundDisabled text color
smi_button_disabled_background​​smi_color_on_surface_variantDisabled text background color
smi_list_picker_title_text​​smi_color_on_surfaceList picker title text color
smi_cancel_button_active​​smi_color_on_secondaryCancel button active color
smi_cancel_button_bg_active​​smi_color_on_backgroundCancel button active background color
smi_cancel_button_pressed​​smi_color_on_secondaryCancel button pressed color
smi_cancel_button_bg_pressed​​smi_color_secondary_activeCancel button pressed background color
MESSAGE SEARCH COLORS
smi_message_search_input_barsmi_color_on_background_semi_transparentSearch input bar color
smi_message_search_highlight_border_agentsmi_color_highlightHighlighted border color for agent
smi_message_search_highlight_border_usersmi_color_highlightHighlighted border color for user
smi_message_search_highlight_text_agentsmi_color_primaryHighlighted text color for agent
smi_message_search_highlight_text_usersmi_color_primaryHighlighted text color for user
smi_message_search_highlight_background_agentsmi_color_surface_highlightHiglighted background color for agent
smi_message_search_highlight_background_usersmi_color_secondary_highlightHiglighted background color for user
CAMERA COLORS
smi_camera_button_active​​smi_color_on_secondaryCamera button active color
smi_camera_button_bg_active​​smi_color_on_secondary_transparentCamera button active background color
smi_camera_button_focused​​smi_color_secondaryCamera button focused color
smi_camera_button_bg_focused​​smi_color_on_secondary_semi_transparentCamera button focused background color
smi_camera_button_pressed​​smi_color_on_secondaryCamera button pressed color
smi_camera_button_bg_pressed​​smi_color_on_secondaryCamera button pressed background color
LOADING SCREEN COLORS
smi_loading_screen_text_placeholdersmi_color_surface_secondaryLoading screen placeholder text color
smi_loading_screen_sent_bubble_backgroundsmi_color_surface_secondaryLoading screen sent bubble background color
smi_loading_screen_received_bubble_backgroundsmi_color_on_backgroundLoading screen received bubble background color
smi_loading_screen_avatarsmi_color_on_backgroundLoading screen avatar color
smi_loading_screen_backgroundsmi_color_backgroundLoading screen background color
smi_loading_screen_input_text_placeholdersmi_color_surface_secondaryLoading screen input text placeholder color