# Customize UI Appearance

If you are using the default interface from TapTalk.io UI implementation type, you can customize the appearance of the chat UI. To do this, open your application's `colors.xml` or `styles.xml` file and override the values present in TapTalk.io library's `values.xml` file.

### Customize Default Color Theme

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

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

```markup
<!--TapTalk Default Colors-->
<color name="tapColorPrimaryExtraLight">@color/yourExtraLightColor</color>
<color name="tapColorPrimaryLight">@color/yourLightColor</color>
<color name="tapColorPrimary">@color/yourPrimaryLightColor</color>
<color name="tapColorPrimaryDark">@color/yourDarkColor</color>
<color name="tapColorAccent">@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="tapColorTextLight">@color/yourLightTextColor</color>

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

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

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

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

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

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

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

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

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

{% endtab %}
{% endtabs %}

### Customize Component Colors

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

#### Default Components

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

```markup
<color name="tapDefaultNavBarBackgroundColor">@color/yourColor</color>
<color name="tapDefaultBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat Bubble

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

```markup
<color name="tapDefaultRightBubbleBackgroundColor">@color/yourColor</color>
<color name="tapDefaultRightBubbleDarkBackgroundColor">@color/yourColor</color>
<color name="tapDefaultLeftBubbleBackgroundColor">@color/yourColor</color>
<color name="tapDefaultLeftBubbleDarkBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Text Field

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

```markup
<color name="tapTextFieldCursorColor">@color/yourColor</color>
<color name="tapTextFieldBorderActiveColor">@color/yourColor</color>
<color name="tapTextFieldBorderInactiveColor">@color/yourColor</color>
<color name="tapTextFieldBorderErrorColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Button

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

```markup
<color name="tapButtonInactiveBackgroundGradientLightColor">@color/yourColor</color>
<color name="tapButtonInactiveBackgroundGradientDarkColor">@color/yourColor</color>
<color name="tapButtonInactiveBorderColor">@color/yourColor</color>
<color name="tapButtonActiveBackgroundGradientLightColor">@color/yourColor</color>
<color name="tapButtonActiveBackgroundGradientDarkColor">@color/yourColor</color>
<color name="tapButtonActiveBorderColor">@color/yourColor</color>
<color name="tapButtonDestructiveBackgroundColor">@color/yourColor</color>
<color name="tapButtonIconColor">@color/yourColor</color>
<color name="tapButtonIconPrimaryColor">@color/yourColor</color>
<color name="tapButtonIconDestructiveColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Switch

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

```markup
<color name="tapSwitchActiveBackgroundColor">@color/yourColor</color>
<color name="tapSwitchInactiveBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Popup Dialog

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

```markup
<color name="tapPopupDialogPrimaryButtonBackgroundSuccessColor">@color/yourColor</color>
<color name="tapPopupDialogPrimaryButtonBackgroundErrorColor">@color/yourColor</color>
<color name="tapPopupDialogSecondaryButtonBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Unread Badge

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

```markup
<color name="tapUnreadBadgeBackgroundColor">@color/yourColor</color>
<color name="tapUnreadBadgeInactiveBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat Room Page

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

```markup
<color name="tapChatComposerBackgroundColor">@color/yourColor</color>
<color name="tapQuoteLayoutDecorationBackgroundColor">@color/yourColor</color>
<color name="tapRightBubbleBackgroundColor">@color/yourColor</color>
<color name="tapLeftBubbleBackgroundColor">@color/yourColor</color>
<color name="tapRightBubbleQuoteBackgroundColor">@color/yourColor</color>
<color name="tapLeftBubbleQuoteBackgroundColor">@color/yourColor</color>
<color name="tapRightBubbleQuoteDecorationBackgroundColor">@color/yourColor</color>
<color name="tapLeftBubbleQuoteDecorationBackgroundColor">@color/yourColor</color>
<color name="tapRightFileButtonBackgroundColor">@color/yourColor</color>
<color name="tapLeftFileButtonBackgroundColor">@color/yourColor</color>
<color name="tapSystemMessageBackgroundColor">@color/yourColor</color>
<color name="tapUnreadIdentifierBackgroundColor">@color/yourColor</color>
<color name="tapFileProgressBackgroundColorWhite">@color/yourColor</color>
<color name="tapFileProgressBackgroundColorPrimary">@color/yourColor</color>
<color name="tapDeletedChatRoomInfoBackgroundColor">@color/yourColor</color>
<color name="tapChatRoomBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Media Preview

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

```markup
<color name="tapSelectedMediaPreviewThumbnailBorderColor">@color/yourColor</color>
<color name="tapMediaPreviewWarningBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Search

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

```markup
<color name="tapSearchConnectionLostInfoBackgroundColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Default Avatar Background Color

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

```markup
<color name="tapDefaultAvatarBackgroundColor1">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor2">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor3">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor4">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor5">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor6">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor7">@color/yourColor</color>
<color name="tapDefaultAvatarBackgroundColor8">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

### Customize Icon Colors

To customize specific icon colors, you can override the following values in your `colors.xml` file.

#### Default Icons

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

```markup
<color name="tapIconLoadingProgressPrimary">@color/yourColor</color>
<color name="tapIconLoadingProgressWhite">@color/yourColor</color>
<color name="tapIconChevronRightPrimary">@color/yourColor</color>
<color name="tapIconChevronRightGray">@color/yourColor</color>
<color name="tapIconChecklist">@color/yourColor</color>
<color name="tapIconCircleSelectionActive">@color/yourColor</color>
<color name="tapIconCircleSelectionInactive">@color/yourColor</color>
<color name="tapIconLoadingPopupSuccess">@color/yourColor</color>
<color name="tapIconSearchConnectionLost">@color/yourColor</color>
<color name="tapIconMessageSending">@color/yourColor</color>
<color name="tapIconMessageFailed">@color/yourColor</color>
<color name="tapIconMessageSent">@color/yourColor</color>
<color name="tapIconMessageDelivered">@color/yourColor</color>
<color name="tapIconMessageRead">@color/yourColor</color>
<color name="tapIconMessageDeleted">@color/yourColor</color>
<color name="tapIconRemoveItem">@color/yourColor</color>
<color name="tapIconRemoveItemBackground">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Navigation Bar Icons

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

```markup
<color name="tapIconNavigationBarBackButton">@color/yourColor</color>
<color name="tapIconTransparentBackgroundBackButton">@color/yourColor</color>
<color name="tapIconNavBarCloseButton">@color/yourColor</color>
<color name="tapIconNavBarMagnifier">@color/yourColor</color>
<color name="tapIconSearchBarMagnifier">@color/yourColor</color>
<color name="tapIconClearTextButton">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Room List Page Icons

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

```markup
<color name="tapIconRoomListSettingUp">@color/yourColor</color>
<color name="tapIconRoomListSetupSuccess">@color/yourColor</color>
<color name="tapIconRoomListSetupFailure">@color/yourColor</color>
<color name="tapIconRoomListRetrySetupButton">@color/yourColor</color>
<color name="tapIconRoomListMuted">@color/yourColor</color>
<color name="tapIconStartNewChatButton">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### New Chat Page Icons

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

```markup
<color name="tapIconMenuNewContact">@color/yourColor</color>
<color name="tapIconMenuScanQRCode">@color/yourColor</color>
<color name="tapIconMenuCreateNewGroup">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat / Group Profile Page Icons

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

```markup
<color name="tapIconChatProfileMenuNotificationActive">@color/yourColor</color>
<color name="tapIconChatProfileMenuNotificationInactive">@color/yourColor</color>
<color name="tapIconChatProfileMenuConversationColor">@color/yourColor</color>
<color name="tapIconChatProfileMenuBlockUser">@color/yourColor</color>
<color name="tapIconChatProfileMenuSearchChat">@color/yourColor</color>
<color name="tapIconChatProfileMenuClearChat">@color/yourColor</color>
<color name="tapIconGroupProfileMenuViewMembers">@color/yourColor</color>
<color name="tapIconGroupMemberProfileMenuAddToContacts">@color/yourColor</color>
<color name="tapIconGroupMemberProfileMenuSendMessage">@color/yourColor</color>
<color name="tapIconGroupMemberProfileMenuPromoteAdmin">@color/yourColor</color>
<color name="tapIconGroupMemberProfileMenuDemoteAdmin">@color/yourColor</color>
<color name="tapIconGroupMemberProfileMenuRemoveMember">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Media / Image Detail Preview Icons

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

```markup
<color name="tapIconMediaPreviewAdd">@color/yourColor</color>
<color name="tapIconMediaPreviewWarning">@color/yourColor</color>
<color name="tapIconMediaPreviewThumbnailWarning">@color/yourColor</color>
<color name="tapIconMediaPreviewThumbnailWarningBackground">@color/yourColor</color>
<color name="tapIconSaveImage">@color/yourColor</color>
<color name="tapIconMediaListVideo">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Bottom Sheet Icons

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

```markup
<color name="tapIconLongPressActionCopy">@color/yourColor</color>
<color name="tapIconLongPressActionReply">@color/yourColor</color>
<color name="tapIconLongPressActionForward">@color/yourColor</color>
<color name="tapIconLongPressActionDelete">@color/yourColor</color>
<color name="tapIconLongPressActionCallNumber">@color/yourColor</color>
<color name="tapIconLongPressActionSmsNumber">@color/yourColor</color>
<color name="tapIconLongPressActionOpenLink">@color/yourColor</color>
<color name="tapIconLongPressActionComposeEmail">@color/yourColor</color>
<color name="tapIconLongPressActionSaveToGallery">@color/yourColor</color>
<color name="tapIconAttachDocuments">@color/yourColor</color>
<color name="tapIconAttachCamera">@color/yourColor</color>
<color name="tapIconAttachGallery">@color/yourColor</color>
<color name="tapIconAttachAudio">@color/yourColor</color>
<color name="tapIconAttachContact">@color/yourColor</color>
<color name="tapIconAttachLocation">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat Room Page Icons

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

```markup
<color name="tapIconChatComposerSend">@color/yourColor</color>
<color name="tapIconChatComposerSendInactive">@color/yourColor</color>
<color name="tapIconChatComposerBurgerMenu">@color/yourColor</color>
<color name="tapIconChatComposerShowKeyboard">@color/yourColor</color>
<color name="tapIconChatComposerSendBackground">@color/yourColor</color>
<color name="tapIconChatComposerSendBackgroundInactive">@color/yourColor</color>
<color name="tapIconChatComposerBurgerMenuBackground">@color/yourColor</color>
<color name="tapIconChatComposerShowKeyboardBackground">@color/yourColor</color>
<color name="tapIconChatComposerAttach">@color/yourColor</color>
<color name="tapIconFileWhite">@color/yourColor</color>
<color name="tapIconFileUploadDownloadWhite">@color/yourColor</color>
<color name="tapIconFileCancelUploadDownloadWhite">@color/yourColor</color>
<color name="tapIconFileRetryUploadDownloadWhite">@color/yourColor</color>
<color name="tapIconFilePrimary">@color/yourColor</color>
<color name="tapIconFileUploadDownloadPrimary">@color/yourColor</color>
<color name="tapIconFileCancelUploadDownloadPrimary">@color/yourColor</color>
<color name="tapIconFileRetryUploadDownloadPrimary">@color/yourColor</color>
<color name="tapIconFilePlayMedia">@color/yourColor</color>
<color name="tapIconDeletedRightMessageBubble">@color/yourColor</color>
<color name="tapIconDeletedLeftMessageBubble">@color/yourColor</color>
<color name="tapIconChatRoomUnreadButton">@color/yourColor</color>
<color name="tapIconChatRoomUnreadIdentifier">@color/yourColor</color>
<color name="tapIconChatRoomScrollToBottom">@color/yourColor</color>
<color name="tapIconChatRoomScrollToBottomBackground">@color/yourColor</color>
<color name="tapIconUserStatusActive">@color/yourColor</color>
<color name="tapIconChatRoomCancelQuote">@color/yourColor</color>
<color name="tapIconDeletedChatRoom">@color/yourColor</color>
<color name="tapIconQuotedFileBackground">@color/yourColor</color>
<color name="tapIconLocationBubbleMarker">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Location Picker Icons

```markup
<color name="tapIconLocationPickerMarker">@color/yourColor</color>
<color name="tapIconLocationPickerRecenter">@color/yourColor</color>
<color name="tapIconLocationPickerRecenterBackground">@color/yourColor</color>
<color name="tapIconLocationPickerSendLocation">@color/yourColor</color>
<color name="tapIconLocationPickerSendLocationBackground">@color/yourColor</color>
<color name="tapIconLocationPickerAddressActive">@color/yourColor</color>
<color name="tapIconLocationPickerAddressInactive">@color/yourColor</color>
```

#### Scan Result

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

```markup
<color name="tapIconCloseScanResult">@color/yourColor</color>
<color name="tapIconCloseScanResultBackground">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

### Customize Font Style

To use your application's font resource in the chat UI, override the following values in your application's `styles.xml` file.

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

```markup
<style name="tapFontFamilyLight">
    <item name="android:fontFamily">@font/your_light_font</item>
</style>

<style name="tapFontFamilyRegular">
    <item name="android:fontFamily">@font/your_regular_font</item>
</style>

<style name="tapFontFamilyMedium">
    <item name="android:fontFamily">@font/your_medium_font</item>
</style>

<style name="tapFontFamilyBold">
    <item name="android:fontFamily">@font/your_bold_font</item>
</style>

<style name="tapFontFamilyItalic">
    <item name="android:fontFamily">@font/your_italic_font</item>
</style>
```

{% endtab %}
{% endtabs %}

You can also override the following styles to customize specific text styles to your liking, or you you may also override their respective color value in `colors.xml` if you wish to change only the color of the text.

#### Default Font Styles

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

```markup
<style name="tapTitleLabelStyle"></style>
<style name="tapNavBarTitleLabelStyle"></style>
<style name="tapNavBarButtonLabelStyle"></style>
<style name="tapFormLabelStyle"></style>
<style name="tapFormDescriptionLabelStyle"></style>
<style name="tapFormErrorInfoLabelStyle"></style>
<style name="tapFormTextFieldStyle"></style>
<style name="tapFormTextFieldPlaceholderStyle"></style>
<style name="tapClickableLabelStyle"></style>
<style name="tapClickableDestructiveLabelStyle"></style>
<style name="tapButtonLabelStyle"></style>
<style name="tapButtonInactiveLabelStyle"></style>
<style name="tapInfoLabelTitleStyle"></style>
<style name="tapInfoLabelSubtitleStyle"></style>
<style name="tapInfoLabelBodyStyle"></style>
<style name="tapPopupLoadingLabelStyle"></style>
<style name="tapSearchConnectionLostTitleStyle"></style>
<style name="tapSearchConnectionLostDescriptionStyle"></style>
<style name="tapDefaultRoomAvatarSmallFontStyle"></style>
<style name="tapDefaultRoomAvatarMediumFontStyle"></style>
<style name="tapDefaultRoomAvatarLargeFontStyle"></style>
<style name="tapDefaultRoomAvatarExtraLargeFontStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapTitleLabelColor">@color/yourColor</color>
<color name="tapNavBarTitleLabelColor">@color/yourColor</color>
<color name="tapNavBarButtonLabelColor">@color/yourColor</color>
<color name="tapFormLabelColor">@color/yourColor</color>
<color name="tapFormDescriptionLabelColor">@color/yourColor</color>
<color name="tapFormErrorInfoLabelColor">@color/yourColor</color>
<color name="tapFormTextFieldColor">@color/yourColor</color>
<color name="tapFormTextFieldPlaceholderColor">@color/yourColor</color>
<color name="tapClickableLabelColor">@color/yourColor</color>
<color name="tapClickableDestructiveLabelColor">@color/yourColor</color>
<color name="tapButtonLabelColor">@color/yourColor</color>
<color name="tapButtonInactiveLabelColor">@color/yourColor</color>
<color name="tapInfoLabelTitleColor">@color/yourColor</color>
<color name="tapInfoLabelSubtitleColor">@color/yourColor</color>
<color name="tapInfoLabelBodyColor">@color/yourColor</color>
<color name="tapPopupLoadingLabelColor">@color/yourColor</color>
<color name="tapSearchConnectionLostTitleColor">@color/yourColor</color>
<color name="tapSearchConnectionLostDescriptionColor">@color/yourColor</color>
<color name="tapDefaultRoomAvatarSmallFontColor">@color/yourColor</color>
<color name="tapDefaultRoomAvatarMediumFontColor">@color/yourColor</color>
<color name="tapDefaultRoomAvatarLargeFontColor">@color/yourColor</color>
<color name="tapDefaultRoomAvatarExtraLargeFontColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Search Bar Font Styles

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

```markup
<style name="tapSearchBarTextStyle"></style>
<style name="tapNavBarSearchTextStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapSearchBarTextColor">@color/yourColor</color>
<color name="tapSearchBarTextPlaceholderColor">@color/yourColor</color>
<color name="tapSearchBarCancelButtonColor">@color/yourColor</color>
<color name="tapNavBarSearchTextColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Popup Dialog

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

```markup
<style name="tapPopupDialogTitleStyle"></style>
<style name="tapPopupDialogBodyStyle"></style>
<style name="tapPopupDialogButtonTextPrimaryStyle"></style>
<style name="tapPopupDialogButtonTextSecondaryStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapPopupDialogTitleColor">@color/yourColor</color>
<color name="tapPopupDialogBodyColor">@color/yourColor</color>
<color name="tapPopupDialogButtonTextPrimaryColor">@color/yourColor</color>
<color name="tapPopupDialogButtonTextSecondaryColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Bottom Sheet Font Styles

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

```markup
<style name="tapActionSheetDefaultLabelStyle"></style>
<style name="tapActionSheetDestructiveLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapActionSheetDefaultLabelColor">@color/yourColor</color>
<color name="tapActionSheetDestructiveLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### List Section Header Font Styles

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

```markup
<style name="tapSectionHeaderLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapSectionHeaderLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Contact List Font Styles

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

```markup
<style name="tapContactListNameStyle"></style>
<style name="tapContactListUsernameStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapContactListNameColor">@color/yourColor</color>
<color name="tapContactListNameHighlightedColor">@color/yourColor</color>
<color name="tapContactListUsernameColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Room List Page Font Styles

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

```markup
<style name="tapRoomListNameStyle"></style>
<style name="tapRoomListNameHighlightedStyle"></style>
<style name="tapRoomListMessageStyle"></style>
<style name="tapRoomListMessageHighlightedStyle"></style>
<style name="tapGroupRoomListSenderNameStyle"></style>
<style name="tapRoomListTimeStyle"></style>
<style name="tapRoomListUnreadBadgeLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapRoomListNameColor">@color/yourColor</color>
<color name="tapRoomListNameHighlightedColor">@color/yourColor</color>
<color name="tapRoomListMessageColor">@color/yourColor</color>
<color name="tapRoomListMessageHighlightedColor">@color/yourColor</color>
<color name="tapRoomListTimeColor">@color/yourColor</color>
<color name="tapGroupRoomListSenderNameColor">@color/yourColor</color>
<color name="tapRoomListUnreadBadgeLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### New Chat Page Font Styles

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

```markup
<style name="tapNewChatMenuLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapNewChatMenuLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat / Group Profile Page Font Styles

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

```markup
<style name="tapChatProfileRoomNameStyle"></style>
<style name="tapChatProfileMenuLabelStyle"></style>
<style name="tapChatProfileMenuDestructiveLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapChatProfileRoomNameColor">@color/yourColor</color>
<color name="tapChatProfileMenuLabelColor">@color/yourColor</color>
<color name="tapChatProfileMenuDestructiveLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Media Font Styles

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

```markup
<style name="tapMediaListInfoLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapMediaListInfoLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### New Contact Page Font Styles

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

```markup
<style name="tapSearchNewContactResultNameStyle"></style>
<style name="tapSearchNewContactResultUsernameStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapSearchNewContactResultNameColor">@color/yourColor</color>
<color name="tapSearchNewContactResultUsernameColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Gallery Picker Page Font Styles

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

```markup
<style name="tapAlbumNameLabelStyle"></style>
<style name="tapAlbumCountLabelStyle"></style>
<style name="tapGalleryPickerCancelButtonStyle"></style>
<style name="tapGalleryPickerContinueButtonStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapAlbumNameLabelColor">@color/yourColor</color>
<color name="tapAlbumCountLabelColor">@color/yourColor</color>
<color name="tapGalleryPickerCancelButtonColor">@color/yourColor</color>
<color name="tapGalleryPickerContinueButtonColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Chat Room Page Font Styles

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

```markup
<style name="tapChatRoomNameLabelStyle"></style>
<style name="tapChatRoomStatusLabelStyle"></style>
<style name="tapChatComposerTextFieldStyle"></style>
<style name="tapCustomKeyboardItemLabelStyle"></style>
<style name="tapQuoteLayoutTitleLabelStyle"></style>
<style name="tapQuoteLayoutContentLabelStyle"></style>
<style name="tapRightBubbleMessageBodyStyle"></style>
<style name="tapLeftBubbleMessageBodyStyle"></style>
<style name="tapRightBubbleDeletedMessageBodyStyle"></style>
<style name="tapLeftBubbleDeletedMessageBodyStyle"></style>
<style name="tapRightBubbleQuoteTitleStyle"></style>
<style name="tapLeftBubbleQuoteTitleStyle"></style>
<style name="tapRightBubbleQuoteContentStyle"></style>
<style name="tapLeftBubbleQuoteContentStyle"></style>
<style name="tapRightFileBubbleNameStyle"></style>
<style name="tapLeftFileBubbleNameStyle"></style>
<style name="tapRightFileBubbleInfoStyle"></style>
<style name="tapLeftFileBubbleInfoStyle"></style>
<style name="tapLeftBubbleSenderNameStyle"></style>
<style name="tapBubbleMessageStatusStyle"></style>
<style name="tapBubbleMediaInfoStyle"></style>
<style name="tapSystemMessageBodyStyle"></style>
<style name="tapChatRoomUnreadBadgeLabelStyle"></style>
<style name="tapUnreadMessageIdentifierStyle"></style>
<style name="tapUnreadMessageButtonLabelStyle"></style>
<style name="tapDeletedChatRoomInfoTitleStyle"></style>
<style name="tapDeletedChatRoomInfoContentStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapChatRoomNameLabelColor">@color/yourColor</color>
<color name="tapChatRoomStatusLabelColor">@color/yourColor</color>
<color name="tapChatComposerTextFieldColor">@color/yourColor</color>
<color name="tapChatComposerTextFieldPlaceholderColor">@color/yourColor</color>
<color name="tapCustomKeyboardItemLabelColor">@color/yourColor</color>
<color name="tapQuoteLayoutTitleLabelColor">@color/yourColor</color>
<color name="tapQuoteLayoutContentLabelColor">@color/yourColor</color>
<color name="tapRightBubbleMessageBodyColor">@color/yourColor</color>
<color name="tapLeftBubbleMessageBodyColor">@color/yourColor</color>
<color name="tapRightBubbleMessageBodyURLColor">@color/yourColor</color>
<color name="tapLeftBubbleMessageBodyURLColor">@color/yourColor</color>
<color name="tapRightBubbleMessageBodyURLHighlightedColor">@color/yourColor</color>
<color name="tapLeftBubbleMessageBodyURLHighlightedColor">@color/yourColor</color>
<color name="tapRightBubbleDeletedMessageBodyColor">@color/yourColor</color>
<color name="tapLeftBubbleDeletedMessageBodyColor">@color/yourColor</color>
<color name="tapRightBubbleQuoteTitleColor">@color/yourColor</color>
<color name="tapLeftBubbleQuoteTitleColor">@color/yourColor</color>
<color name="tapRightBubbleQuoteContentColor">@color/yourColor</color>
<color name="tapLeftBubbleQuoteContentColor">@color/yourColor</color>
<color name="tapRightFileBubbleNameColor">@color/yourColor</color>
<color name="tapLeftFileBubbleNameColor">@color/yourColor</color>
<color name="tapRightFileBubbleInfoColor">@color/yourColor</color>
<color name="tapLeftFileBubbleInfoColor">@color/yourColor</color>
<color name="tapLeftBubbleSenderNameColor">@color/yourColor</color>
<color name="tapBubbleMessageStatusColor">@color/yourColor</color>
<color name="tapBubbleMediaInfoColor">@color/yourColor</color>
<color name="tapSystemMessageBodyColor">@color/yourColor</color>
<color name="tapChatRoomUnreadBadgeLabelColor">@color/yourColor</color>
<color name="tapUnreadMessageIdentifierColor">@color/yourColor</color>
<color name="tapUnreadMessageButtonLabelColor">@color/yourColor</color>
<color name="tapDeletedChatRoomInfoTitleColor">@color/yourColor</color>
<color name="tapDeletedChatRoomInfoContentColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Location Picker Font Styles

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

```markup
<style name="tapLocationPickerTextFieldStyle"></style>
<style name="tapLocationPickerTextFieldClearButtonStyle"></style>
<style name="tapLocationPickerSearchResultStyle"></style>
<style name="tapLocationPickerAddressStyle"></style>
<style name="tapLocationPickerSendLocationLabelButtonStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapLocationPickerTextFieldColor">@color/yourColor</color>
<color name="tapLocationPickerTextFieldPlaceholderColor">@color/yourColor</color>
<color name="tapLocationPickerTextFieldClearButtonColor">@color/yourColor</color>
<color name="tapLocationPickerSearchResultColor">@color/yourColor</color>
<color name="tapLocationPickerAddressColor">@color/yourColor</color>
<color name="tapLocationPickerAddressPlaceholderColor">@color/yourColor</color>
<color name="tapLocationPickerSendLocationLabelButtonColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Send Media Preview Font Styles

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

```markup
<style name="tapMediaPreviewCancelButtonStyle"></style>
<style name="tapMediaPreviewItemCountStyle"></style>
<style name="tapMediaPreviewCaptionStyle"></style>
<style name="tapMediaPreviewCaptionLetterCountStyle"></style>
<style name="tapMediaPreviewSendLabelButtonStyle"></style>
<style name="tapMediaPreviewWarningTitleStyle"></style>
<style name="tapMediaPreviewWarningBodyStyle"></style>
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="XML/HTML/SVG" %}

```markup
<color name="tapMediaPreviewCancelButtonColor">@color/yourColor</color>
<color name="tapMediaPreviewItemCountColor">@color/yourColor</color>
<color name="tapMediaPreviewCaptionColor">@color/yourColor</color>
<color name="tapMediaPreviewCaptionPlaceholderColor">@color/yourColor</color>
<color name="tapMediaPreviewCaptionLetterCountColor">@color/yourColor</color>
<color name="tapMediaPreviewSendLabelButtonColor">@color/yourColor</color>
<color name="tapMediaPreviewWarningTitleColor">@color/yourColor</color>
<color name="tapMediaPreviewWarningBodyColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Image Detail Preview Font Styles

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

```markup
<style name="tapImageDetailSenderNameStyle"></style>
<style name="tapImageDetailMessageStatusStyle"></style>
<style name="tapImageDetailCaptionStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapImageDetailSenderNameColor">@color/yourColor</color>
<color name="tapImageDetailMessageStatusColor">@color/yourColor</color>
<color name="tapImageDetailCaptionColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Group Chat Font Styles

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

```markup
<style name="tapSelectedMemberListNameStyle"></style>
<style name="tapGroupMemberCountStyle"></style>
<style name="tapGroupMemberListRoleStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapSelectedMemberListColor">@color/yourColor</color>
<color name="tapGroupMemberCountColor">@color/yourColor</color>
<color name="tapGroupMemberListRoleColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}

#### Video Player Font Styles

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

```markup
<style name="tapVideoPlayerTimeLabelStyle"></style>
```

{% endtab %}
{% endtabs %}

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

```markup
<color name="tapVideoPlayerTimeLabelColor">@color/yourColor</color>
```

{% endtab %}
{% endtabs %}