# Customize UI Appearance

 You can customize the appearance of the TapTalkLive view's color scheme. To do this, open your application's `colors.xml` file and override the values present in TapTalk.io library's `values.xml` file.

### Customize Default Color Theme

To customize the UI's color theme, open your `colors.xml` file and add override following values with your own colors:

{% tabs %}
{% tab title="colors.xml" %}

```markup
<!--TapTalkLive Default Colors-->
<color name="ttlColorPrimaryExtraLight">@color/yourExtraLightColor</color>
<color name="ttlColorPrimaryLight">@color/yourLightColor</color>
<color name="ttlColorPrimary">@color/yourPrimaryLightColor</color>
<color name="ttlColorPrimaryDark">@color/yourDarkColor</color>
<color name="ttlColorAccent">@color/yourAccentColor</color>
```

{% endtab %}
{% endtabs %}

{% hint style="warning" %}
**Note**: you can override the default color values partially, but it is recommended to change all of them accordingly to make sure the color theme within the chat UI matches
{% endhint %}

### Customize General Colors

The following are the values used as general component colors, present in `colors.xml`

{% tabs %}
{% tab title="colors.xml" %}

```markup
<!--Light text color on dark background-->
<color name="ttlColorTextLight">@color/yourLightTextColor</color>

<!--Medium text color generally used on subtitles or placeholders-->
<color name="ttlColorTextMedium">@color/yourMediumTextColor</color>

<!--Dark text color on light background-->
<color name="ttlColorTextDark">@color/yourDarkTextColor</color>

<!--Identifies successful actions-->
<color name="ttlColorSuccess">@color/yourSuccessTextColor</color>

<!--Identifies errors or destructive actions-->
<color name="ttlColorError">@color/yourErrorTextColor</color>

<!--Primary colored icons used on light background-->
<color name="ttlColorPrimaryIcon">@color/yourPrimaryIconColor</color>

<!--White icons used on colored background-->
<color name="ttlColorWhiteIcon">@color/yourCustomLightIconColor</color>

<!--Default color for gray icons-->
<color name="ttlColorGrayIcon">@color/yourGrayIconColor</color>

<!--Default icon color for successful actions-->
<color name="ttlColorSuccessIcon">@color/yourSuccessIconColor</color>

<!--Default icon color for errors or destructive actions-->
<color name="ttlColorDestructiveIcon">@color/yourDestructiveIconColor</color>
```

{% endtab %}
{% endtabs %}