Customize colors

You can customize the look and feel of the chat widget by specifying the colors used throughout the chat UI.

🚧
Previous theme no longer supported
The KusAppTheme that was previously used customize chat UI colors is no longer supported. We recommend you use the color customization below, or change your existing style name from
<style name="KusAppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
to
<style name="KusAppTheme.Overlay" parent="KusAppTheme">
The rest of the styling can stay the same.

To customize the chat UI colors, add the following colors element to your colors.xml file. The colors.xml file is located under app > res > values > colors in your Android project. Replace the Kustomer Chat color values with your own to override the default color values for the chat widget.

<style name="KusAppTheme.Overlay" parent="KusAppTheme">
   <!-- Customize your theme here. -->

   <!-- Colors-->
   <item name="kusColorHeader">@color/kusColorHeader</item>
   <item name="kusColorOnHeader">@color/kusColorOnHeader</item>
   <item name="kusColorOnHeaderVariant">@color/kusColorOnHeaderVariant</item>

   <item name="kusColorAgentBubble">@color/kusColorAgentBubble</item>
   <item name="kusColorOnAgentBubble">@color/kusColorOnAgentBubble</item>
   <item name="kusColorUrlLinkOnAgentBubble">@color/kusColorUrlLinkOnAgentBubble</item>

   <item name="kusColorCustomerBubble">@color/kusColorCustomerBubble</item>
   <item name="kusColorOnCustomerBubble">@color/kusColorOnCustomerBubble</item>
   <item name="kusColorUrlLinkOnCustomerBubble">@color/kusColorUrlLinkOnCustomerBubble</item>

   <item name="kusColorBottomNavigationRipple">@color/kusColorBottomNavigationRipple</item>

   <item name="kusColorPrimary">@color/kusColorPrimary</item>
   <item name="kusColorOnPrimary">@color/kusColorOnPrimary</item>

   <item name="kusColorBackground">@color/kusColorBackground</item>
   <item name="kusColorControlNormal">@color/kusColorControlNormal</item>

   <item name="kusColorSurface">@color/kusColorSurface</item>
   <item name="kusColorOnSurface">@color/kusColorOnSurface</item>
   <item name="kusColorSurfaceVariant">@color/kusColorSurfaceVariant</item>

   <item name="kusColorError">@color/kusColorError</item>
   <item name="kusColorListDivider">@color/kusColorListDivider</item>
   <item name="kusColorLightSurfaceVariant">@color/kusColorLightSurfaceVariant</item>

   <item name="android:statusBarColor" tools:targetApi="lollipop">@color/kusColorHeader</item>
   <!-- End Colors-->

   <item name="android:textStyle">normal</item>
   <item name="textAppearanceHeadline1">@style/KusTextAppearance.Headline</item>
   <item name="android:windowLightStatusBar" tools:targetApi="m">true</item>

   <item name="android:listDivider">@drawable/kus_list_divider</item>

   <item name="bottomSheetDialogTheme">@style/KusAppTheme.BottomSheetDialog</item>
   <item name="chipStyle">@style/KusWidget.Chip</item>

   <item name="drawerArrowStyle">@style/KusWidget.ToolbarArrow</item>
</style>

You will also need to override the same colors for dark mode. You can do this by adding the customizations in the colors.xml (night) file which is located under app > res > values-night > colors in your Android project.

Color customization guide

You can customize the style of the following colors.

<color name="kusColorHeader">@color/kus_white</color>
<color name="kusColorOnHeader">@color/kus_black</color>
<color name="kusColorOnHeaderVariant">@color/kus_brownish_grey</color>

<color name="kusColorAgentBubble">@color/kus_white</color>
<color name="kusColorOnAgentBubble">@color/kus_black</color>
<color name="kusColorUrlLinkOnAgentBubble">@color/kus_blue</color>

<color name="kusColorCustomerBubble">@color/kus_blue</color>
<color name="kusColorOnCustomerBubble">@color/kus_white</color>
<color name="kusColorUrlLinkOnCustomerBubble">@color/kus_white</color>

<color name="kusColorBottomNavigationRipple">@color/kusColorSurfaceVariant</color>

<color name="kusColorPrimary">@color/kus_blue</color>
<color name="kusColorOnPrimary">@color/kus_white</color>

<color name="kusColorBackground">@color/kus_white_variant</color>
<color name="kusColorControlNormal">@color/kus_white</color>

<color name="kusColorSurface">@color/kus_white</color>
<color name="kusColorOnSurface">@color/kus_black</color>
<color name="kusColorSurfaceVariant">@color/kus_brownish_grey</color>

<color name="kusColorError">@color/kus_red</color>

<color name="kusColorListDivider">@color/kus_divider</color>
<color name="kusColorLightSurfaceVariant">@color/kus_light_grey</color>

The following images show how the color customizations relate to the chat UI.

Chat screen example

Chat history screen example

Knowledge base screen example

Default color palettes

The following images show the default color palettes used in the chat UI.

Default light mode color palette

Default dark mode color palette

🚧Previous theme no longer supported

Color customization guide

Chat screen example

Chat history screen example

Knowledge base screen example

Default color palettes

Default light mode color palette

Default dark mode color palette

🚧
Previous theme no longer supported