Kustomer Chat SDKs

The Kustomer Chat SDK is available for Android, iOS, and web

Customize colors

Learn how to customize the chat widget colors for your app.

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 screenChat screen

Chat screen

Chat history screen example

Chat history screenChat history screen

Chat history screen

Knowledge base screen example

Knowledge base screenKnowledge base screen

Knowledge base screen

Default color palettes

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

Default light mode color palette

Light Mode Color PaletteLight Mode Color Palette

Light Mode Color Palette

Default dark mode color palette

Dark Mode Color PaletteDark Mode Color Palette

Dark Mode Color Palette

Updated 2 months ago


Customize colors


Learn how to customize the chat widget colors for your app.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.