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.

This article applies to the following implementations:

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.

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

Keyword	Default Light Color	Default Dark Color	Description
​​smi_color_primary	#FAFAF9	#2B2B26	Primary branding color
​​smi_color_primary_variant	#706E6B	#2B2826	Variant of the primary color
​​smi_color_on_primary	#2B2B26	#ECEBEA	Primary text color
​​smi_color_secondary	#0070D2	#007ADD	Secondary branding color
​​smi_color_on_secondary	#FFFFFF	#FFFFFF	Secondary text color
​​smi_color_secondary_active	#014485	#16325C	Secondary color for active elements
smi_color_secondary_highlight	#062680	#6EC4FA	Secondary color for highlighted elements
​​smi_color_on_secondary_variant	#DDDBDA	#1A1B1E	Alternate secondary text color
​​smi_color_background	#F3F2F2	#080707	Background color
​​smi_color_on_background	#706E6B	#B0ADAB	Color for elements on the background color
​​smi_color_surface	#FFFFFF	#1A1B1E	Primary color for surfaces
​​smi_color_on_surface	#2B2826	#C9C7C5	Text color on surfaces
​​smi_color_surface_highlight	#B3B3B3	#66676B	Highlight color for surfaces
​​smi_color_surface_variant	#DDDBDA	#30373D	Variant color for surfaces
​​smi_color_on_surface_variant	#0070D2	#FFFFFF	Variant color for surfaces
smi_color_surface_secondary	#CED0D2	#30373D	Secondary color for surfaces
smi_color_tertiary	#000000	#000000	Tertiary branding color
smi_color_highlight	#FCC003	#FCC003	Highlight color
​​smi_color_error	#A61A14	#D4504C	Error feedback color
​​smi_color_warning	#FFB75D	#FFB75D	Warning feedback color
​​smi_color_success	#04844B	#4BCA81	Success feedback color
smi_color_transparent	(alpha #00) #00FFFF	(alpha #00) #00FFFF	Transparent color
smi_color_background_transparent	(alpha #80) #F3F2F2	(alpha #80) #080707	Transparent background color
smi_color_surface_transparent	(alpha #80) #FFFFFF	(alpha #80) #1A1B1E	Transparent surface color
smi_color_on_secondary_transparent	(alpha #80) #FFFFFF	(alpha #80) #FFFFFF	Transparent secondary color
smi_color_on_secondary_semi_transparent	(alpha #99) #FFFFFF	(alpha #99) #FFFFFF	Transparent color on secondary
smi_color_on_background_semi_transparent	(alpha: #80) #706E6B	(alpha: #80) #B0ADAB	Semi-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.