# Theme Customization

The appearance of the Chat SDK can easily be customized:

1. Use a custom theme
2. Change the color scheme
4. Change the icons
5. Customize activities and fragments

## Use a custom theme

Add a theme to your app:

In the `AndroidManifest.xml`

<application
    android:theme="@style/YouTheme"

To force the Chat SDK to use your app's theme you first need to make sure your theme inherits from the Chat SDK theme:

<style name="YourTheme" parent="ChatSDKTheme">

Then:

UIModule.config().overrideTheme();

Alternatively, if you want to add a separate theme to the Chat SDK, use the following:

UIModule.config().setTheme(R.style.CustomChatSDKTheme);

Make sure this theme also uses `ChatSDKTheme` as it's parent.

## Change the color scheme

Chat SDK comes with a number of attributes which you can override to customize the color scheme:

In your theme add:

<resources>
    <style name="CustomChatSDKTheme" parent="ChatSDKTheme">
        <item name="colorPrimary">#FF0000</item>
        <item name="colorPrimaryDark">@color/primary_dark</item>
        <item name="colorAccent">@color/accent</item>
        <item name="colorControlNormal">@color/text_primary</item>
        // Other custom attributes
    </style>
</resources>

Here is a [full list](https://github.com/chat-sdk/chat-sdk-android/blob/master/chat-sdk-core-ui/src/main/res/values/attr.xml) of the available attributes:

<attr name="actionBarBackgroundColor" format="reference|color" />
<attr name="actionBarTextColor" format="reference|color" />

<attr name="avatarBorderColor" format="reference|color" />
<attr name="avatarBackgroundColor" format="reference|color" />
<attr name="dialogUnreadBubbleBorderColor" format="reference|color" />
<attr name="onlineIndicatorBorderColor" format="reference|color" />
<attr name="onlineIndicatorOnlineColor" format="reference|color" />
<attr name="onlineIndicatorOfflineColor" format="reference|color" />

<attr name="systemDefaultBubbleColor" format="reference|color" />
<attr name="systemDefaultBubblePressedColor" format="reference|color" />
<attr name="systemDefaultBubbleSelectedColor" format="reference|color" />

<attr name="systemMessageTextColor" format="reference|color" />
<attr name="systemMessageTextSize" format="reference|dimension" />
<attr name="systemMessageBubbleDrawable" format="reference" />

<attr name="replyBackgroundColor" format="reference|color" />
<attr name="replyDividerColor" format="reference|color" />
<attr name="replyTextSize" format="dimension|reference" />
<attr name="replyTextPadding" format="dimension|reference" />

<attr name="incomingReplyDrawable" format="reference" />
<attr name="incomingReplyImageDrawable" format="reference" />
<attr name="incomingReplyDividerColor" format="reference|color" />
<attr name="incomingReplyBackgroundColor" format="reference|color" />
<attr name="incomingReplyTextColor" format="reference|color" />
<attr name="incomingReplyTextSize" format="reference|dimension" />

<attr name="incomingUserNameTextColor" format="reference|color" />
<attr name="incomingUserNameTextFont" format="reference|string" />
<attr name="incomingUserNameTextSize" format="reference|dimension" />
<attr name="incomingIconDrawable" format="reference" />

<attr name="outcomingReplyDividerColor" format="reference|color" />
<attr name="outcomingReplyDrawable" format="reference" />
<attr name="outcomingReplyImageDrawable" format="reference" />
<attr name="outcomingReplyBackgroundColor" format="reference|color" />
<attr name="outcomingReplyTextColor" format="reference|color" />
<attr name="outcomingReplyTextSize" format="reference|dimension" />

<attr name="outcomingIconDrawable" format="reference" />

<attr name="chatViewDividerColor" format="reference|color" />
<attr name="chatViewMessageInputBackgroundColor" format="reference|color" />

<attr name="logoutButtonColor" format="reference|color" />
<attr name="loginButtonColor" format="reference|color" />
<attr name="registerButtonColor" format="reference|color" />
<attr name="anonymousButtonColor" format="reference|color" />
<attr name="resetPasswordButtonTextColor" format="reference|color" />
<attr name="resetPasswordButtonColor" format="reference|color" />

### Styling the ChatView using ChatKit

Chat SDK also uses [ChatKit](https://github.com/stfalcon-studio/ChatKit) which has it's own stylable attributes:

- [ChatView](https://github.com/stfalcon-studio/ChatKit/blob/master/docs/COMPONENT_MESSAGES_LIST.md#styling-via-attributes)
- [MessageInput](https://github.com/stfalcon-studio/ChatKit/blob/master/docs/COMPONENT_MESSAGE_INPUT.MD)
- [ThreadsFragment](https://github.com/stfalcon-studio/ChatKit/blob/master/docs/COMPONENT_DIALOGS_LIST.MD)