> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Styling

> Style CometChat UI Kit components using XML theme attributes or Compose style data classes.

<Accordion title="AI Integration Quick Reference">
  | Field             | Value                                                                                                                                                                                     |
  | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Kotlin XML Views  | Override XML styles in `themes.xml` extending component parent styles (e.g., `CometChatConversationsStyle`), assign via theme attributes                                                  |
  | Jetpack Compose   | Pass style data classes as parameters (e.g., `CometChatConversationsStyle`, `CometChatMessageListStyle`) with `.default()` and `.copy()`                                                  |
  | Pattern (XML)     | Create custom style → extend parent → assign to `AppTheme` via theme attribute                                                                                                            |
  | Pattern (Compose) | Call `ComponentStyle.default().copy(property = value)` → pass as `style` parameter                                                                                                        |
  | Related           | [Theme Introduction](/ui-kit/android/v6/theme-introduction) · [Color Resources](/ui-kit/android/v6/color-resources) · [Message Bubble Styling](/ui-kit/android/v6/message-bubble-styling) |
</Accordion>

This page shows how to style CometChat UI Kit components in Android. It is written for Android developers customizing UI Kit v6.

## When to use this

* You want UI Kit screens (lists, headers, and message UI) to match your brand colors and typography.
* You need to customize calling and AI UI components without rebuilding UI from scratch.
* You prefer centralized styling through `res/values/themes.xml` (XML Views) or style data classes (Compose).
* You want consistent iconography by supplying your own vector drawables.
* You need a repeatable pattern that can be applied across components.

## Prerequisites

* CometChat Android UI Kit v6 installed in your app.
* Your app theme extends `CometChatTheme.DayNight` (for XML Views).
* You can edit `res/values/themes.xml` in your Android module.
* You can add drawable resources to `res/drawable/` when needed.
* You rebuild or sync Gradle after updating styles.

## Styling Pattern

<Tabs>
  <Tab title="Kotlin (XML Views)">
    Components read styles from XML theme attributes. The pattern is:

    1. Open `res/values/themes.xml`.
    2. Create a custom style that extends the component's parent style (for example, `CometChatConversationsStyle`).
    3. Assign your custom style to `AppTheme` using the component's theme attribute (for example, `cometchatConversationsStyle`).
    4. Sync Gradle and rebuild the app.
    5. Navigate to the screen that uses the component and confirm the visual change.

    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
            <item name="cometchatConversationsAvatarStyle">@style/CustomAvatarStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
        </style>
    </resources>
    ```

    You can also set fonts globally:

    ```xml themes.xml lines theme={null}
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatFontBold">@font/your_font_bold</item>
        <item name="cometchatFontMedium">@font/your_font_medium</item>
        <item name="cometchatFontRegular">@font/your_font_regular</item>
    </style>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    Components accept a `style` parameter — a data class with `.default()` factory and `.copy()` for overrides:

    ```kotlin lines theme={null}
    CometChatConversations(
        style = CometChatConversationsStyle.default().copy(
            backgroundColor = Color(0xFFFFF9F5),
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```

    Nested styles (e.g., avatar inside conversations) are overridden the same way:

    ```kotlin lines theme={null}
    CometChatConversations(
        style = CometChatConversationsStyle.default().copy(
            avatarStyle = CometChatAvatarStyle.default().copy(
                backgroundColor = Color(0xFFFBAA75),
                cornerRadius = 8.dp
            )
        )
    )
    ```
  </Tab>
</Tabs>

## Core concepts

* `AppTheme` is the single place where UI Kit style hooks are wired (XML Views).
* Each UI Kit component has a parent style (for example, `CometChatMessageListStyle`) and a theme attribute (for example, `cometchatMessageListStyle`).
* Custom styles must extend the correct parent style to inherit default behavior.
* Drawable overrides (for example, custom icons) live in `res/drawable/` and are referenced from styles.
* Fonts can be set once at the theme level and reused across components.

***

## Implementation

Use the following sections to style each component. Each section lists what changes, where to change it, the exact code to paste, and how to verify the result.

### Chat Lists & Messaging

#### Conversations

The `CometChatConversations` component renders the recent chats list.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/g17zegx-VcA6lulj/images/433c987e-Conversation_Styling-1e5686a26eb349d5cbc40262b9b6df0e.png?fit=max&auto=format&n=g17zegx-VcA6lulj&q=85&s=9008cfdc4f5ed5026180c106c268727b" width="1280" height="800" data-path="images/433c987e-Conversation_Styling-1e5686a26eb349d5cbc40262b9b6df0e.png" />
</Frame>

What you're changing: avatar and badge styling in the conversation list.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatConversations`
* **Default behavior**: UI Kit default avatar and badge styles.
* **Override**: set `cometchatConversationsStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomBadgeCountStyle" parent="CometChatBadgeStyle">
            <item name="cometchatBadgeBackgroundColor">#F76808</item>
            <item name="cometchatBadgeTextColor">#FFFFFF</item>
        </style>

        <style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
            <item name="cometchatConversationsAvatarStyle">@style/CustomAvatarStyle</item>
            <item name="cometchatConversationsBadgeStyle">@style/CustomBadgeCountStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatConversations(
        style = CometChatConversationsStyle.default().copy(
            avatarStyle = CometChatAvatarStyle.default().copy(
                backgroundColor = Color(0xFFFBAA75),
                cornerRadius = 8.dp
            ),
            badgeStyle = CometChatBadgeStyle.default().copy(
                backgroundColor = Color(0xFFF76808),
                textColor = Color.White
            )
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies custom avatar and badge styles to conversation list items.
* **Verify**: the Conversations list shows updated avatar backgrounds and badge colors.

Attribute references:

* [Conversations attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_conversations.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)
* [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_badge.xml)

#### Users

The `CometChatUsers` component renders a list of users for selection or navigation.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/KYL4KlE88w2a-VuU/images/c8909b74-users_styling-3acb1ffef7870b6903a070fd83b5103f.png?fit=max&auto=format&n=KYL4KlE88w2a-VuU&q=85&s=9c24c26199e2a834a5147f9572ed35a9" width="1280" height="800" data-path="images/c8909b74-users_styling-3acb1ffef7870b6903a070fd83b5103f.png" />
</Frame>

What you're changing: user list avatar and separator styling.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatUsers`
* **Default behavior**: UI Kit default avatar and list styling.
* **Override**: set `cometchatUsersStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomUsersStyle" parent="CometChatUsersStyle">
            <item name="cometchatUsersAvatarStyle">@style/CustomAvatarStyle</item>
            <item name="cometchatUsersSeparatorColor">#F76808</item>
            <item name="cometchatUsersTitleTextColor">#F76808</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatUsersStyle">@style/CustomUsersStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatUsers(
        style = CometChatUsersStyle.default().copy(
            separatorColor = Color(0xFFF76808),
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies avatar and separator color overrides to the user list.
* **Verify**: the Users list shows updated avatar backgrounds and separator color.

Attribute references:

* [Users attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_users.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

#### Groups

The `CometChatGroups` component renders group items and their summary data.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/fpMITRfzsXMT2wZU/images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png?fit=max&auto=format&n=fpMITRfzsXMT2wZU&q=85&s=730e8c1a7f2e20bc70834ec8d68d8429" width="1280" height="800" data-path="images/5b3c1825-groups_styling-f8164f3a9b1247ad1db859328c199051.png" />
</Frame>

What you're changing: group list avatar and typography colors.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatGroups`
* **Default behavior**: UI Kit default group item styling.
* **Override**: set `cometchatGroupsStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomGroupsStyle" parent="CometChatGroupsStyle">
            <item name="cometchatGroupsAvatarStyle">@style/CustomAvatarStyle</item>
            <item name="cometchatGroupsSeparatorColor">#F76808</item>
            <item name="cometchatGroupsTitleTextColor">#F76808</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatGroupsStyle">@style/CustomGroupsStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatGroups(
        style = CometChatGroupsStyle.default().copy(
            separatorColor = Color(0xFFF76808),
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: styles group avatars and separators in the Groups list.
* **Verify**: the Groups list shows the updated avatar background and title color.

Attribute references:

* [Groups attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_groups.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

#### Message Header

The `CometChatMessageHeader` component renders the title, avatar, and action icons for a chat.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/KYL4KlE88w2a-VuU/images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png?fit=max&auto=format&n=KYL4KlE88w2a-VuU&q=85&s=ab57f5b656eb8e1ff0d33c732c4ad403" width="1280" height="240" data-path="images/c761803d-message_header_styling-ae4670a5a130374818f37e2144246748.png" />
</Frame>

What you're changing: title text color, avatar styling, and call button icons.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatMessageHeader`
* **Default behavior**: UI Kit default header typography and icons.
* **Override**: set `cometchatMessageHeaderStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomCallButtonStyle" parent="CometChatCallButtonsStyle">
            <item name="cometchatCallButtonsVideoCallIconTint">#F76808</item>
            <item name="cometchatCallButtonsVoiceCallIconTint">#F76808</item>
        </style>

        <style name="CustomMessageHeaderStyle" parent="CometChatMessageHeaderStyle">
            <item name="cometchatMessageHeaderTitleTextColor">#F76808</item>
            <item name="cometchatMessageHeaderAvatarStyle">@style/CustomAvatarStyle</item>
            <item name="cometchatMessageHeaderCallButtonsStyle">@style/CustomCallButtonStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatMessageHeaderStyle">@style/CustomMessageHeaderStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageHeader(
        style = CometChatMessageHeaderStyle.default().copy(
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies custom title color, avatar styling, and call button tints in the message header.
* **Verify**: open a conversation and check the header text and call button icons.

Attribute references:

* [Message Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_header.xml)
* [Call Buttons attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_call_buttons.xml)

#### Message List

The `CometChatMessageList` component renders conversation messages and their bubble styles.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/e0Ylj4tzwVQ2-pAf/images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png?fit=max&auto=format&n=e0Ylj4tzwVQ2-pAf&q=85&s=0b122ac2c23f48039224bdabd48d46f9" width="1280" height="800" data-path="images/03a08ce8-message_list_styling-ebbb6bea74da1c21078f037fb50d8bff.png" />
</Frame>

What you're changing: message list background and outgoing bubble styling.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatMessageList`
* **Default behavior**: UI Kit default message list background and bubble colors.
* **Override**: set `cometchatMessageListStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
            <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
        </style>

        <style name="CustomCometChatMessageListStyle" parent="CometChatMessageListStyle">
            <item name="cometchatMessageListBackgroundColor">#FEEDE1</item>
            <item name="cometchatMessageListOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatMessageListStyle">@style/CustomCometChatMessageListStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageList(
        style = CometChatMessageListStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
                backgroundColor = Color(0xFFF76808)
            )
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: changes the message list background and outgoing bubble color.
* **Verify**: open a conversation and check outgoing message bubble colors.

Attribute references:

* [Message List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_list.xml)
* [Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_bubble.xml)

#### Message Composer

The `CometChatMessageComposer` component renders the input box and action buttons.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/j4GL6xab8z_KzbU-/images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png?fit=max&auto=format&n=j4GL6xab8z_KzbU-&q=85&s=b3897868a2646f4a4c6e8e4712e0e6ce" width="1280" height="232" data-path="images/482915e0-message_composer_styling-db627f8855f376a0287e9d2d7f0be603.png" />
</Frame>

What you're changing: send button icon and composer icon tints.

* **Where to change it**: `res/drawable/active_send_button.xml` and `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatMessageComposer`
* **Default behavior**: UI Kit default composer icons and send button drawable.
* **Override**: set `cometchatMessageComposerStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml res/drawable/active_send_button.xml lines theme={null}
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="32dp"
        android:height="32dp"
        android:viewportWidth="32"
        android:viewportHeight="32">
        <path
            android:fillColor="#F76808"
            android:pathData="M16,0L16,0A16,16 0,0 1,32 16L32,16A16,16 0,0 1,16 32L16,32A16,16 0,0 1,0 16L0,16A16,16 0,0 1,16 0z" />
        <group>
            <clip-path android:pathData="M4,4h24v24h-24z" />
            <path
                android:fillColor="?attr/cometchatColorWhite"
                android:pathData="M10.767,22.723C10.465,22.843 10.178,22.818 9.907,22.646C9.636,22.474 9.5,22.223 9.5,21.894V17.673L16.423,16L9.5,14.327V10.106C9.5,9.777 9.636,9.526 9.907,9.354C10.178,9.182 10.465,9.157 10.767,9.277L24.723,15.161C25.095,15.328 25.281,15.608 25.281,16.002C25.281,16.395 25.095,16.674 24.723,16.838L10.767,22.723Z" />
        </group>
    </vector>
    ```

    ```xml res/values/themes.xml lines theme={null}
    <resources>
        <style name="CustomMessageComposerStyle" parent="CometChatMessageComposerStyle">
            <item name="cometchatMessageComposerAttachmentIconTint">#F76808</item>
            <item name="cometchatMessageComposerVoiceRecordingIconTint">#F76808</item>
            <item name="cometchatMessageComposerActiveStickerIconTint">#F76808</item>
            <item name="cometchatMessageComposerInactiveStickerIconTint">#F76808</item>
            <item name="cometchatMessageComposerAIIconTint">#F76808</item>
            <item name="cometchatMessageComposerActiveSendButtonDrawable">@drawable/active_send_button</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatMessageComposerStyle">@style/CustomMessageComposerStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageComposer(
        style = CometChatMessageComposerStyle.default().copy(
            attachmentIconTint = Color(0xFFF76808),
            voiceRecordingIconTint = Color(0xFFF76808),
            aiIconTint = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies custom icon tints and the active send button drawable to the composer.
* **Verify**: the composer shows the custom send button and tinted icons.

Attribute references:

* [Message Composer attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_composer.xml)

#### Group Members

The `CometChatGroupMembers` component lists users inside a group.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/9f-U9qxmNQ_QHoI6/images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png?fit=max&auto=format&n=9f-U9qxmNQ_QHoI6&q=85&s=f1995d9dffa91ea6f8376ca628a4ff2f" width="1280" height="800" data-path="images/1bd5a982-group_members_styling-ee7427e23be4ccf40776d8b1df1342f4.png" />
</Frame>

What you're changing: group member list avatars, separators, and back icon tint.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatGroupMembers`
* **Default behavior**: UI Kit default list styling.
* **Override**: set `cometchatGroupMembersStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomGroupMembersStyle" parent="CometChatGroupMembersStyle">
            <item name="cometchatGroupMembersAvatarStyle">@style/CustomAvatarStyle</item>
            <item name="cometchatGroupMembersSeparatorColor">#F76808</item>
            <item name="cometchatGroupMembersTitleTextColor">#F76808</item>
            <item name="cometchatGroupMembersBackIconTint">#F76808</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatGroupMembersStyle">@style/CustomGroupMembersStyle</item>
            <item name="cometchatPrimaryColor">#F76808</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatGroupMembers(
        style = CometChatGroupMembersStyle.default().copy(
            separatorColor = Color(0xFFF76808),
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies custom avatar and separator styling to the group members list.
* **Verify**: the group members screen shows updated avatar and separator colors.

Attribute references:

* [Group Members attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_group_members.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

#### Thread Header

The `CometChatThreadHeader` component renders the parent message preview in threaded views.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/2Yk1_Ncte5qBKMqt/images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png?fit=max&auto=format&n=2Yk1_Ncte5qBKMqt&q=85&s=fd6fd153f9f2587a5dcd068477c81996" width="1280" height="329" data-path="images/76d4d00d-thread_header_styling-447011f9a5da276b357ce91cafa04e94.png" />
</Frame>

What you're changing: thread header bubble colors and reply count styling.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatThreadHeader`
* **Default behavior**: UI Kit default thread header styling.
* **Override**: set `cometchatThreadHeaderStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
            <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
        </style>

        <style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
            <item name="cometchatMessageBubbleBackgroundColor">#F76808</item>
        </style>

        <style name="CustomThreadHeaderStyle" parent="CometChatThreadHeaderStyle">
            <item name="cometchatThreadHeaderOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
            <item name="cometchatThreadHeaderIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
            <item name="cometchatThreadHeaderBackgroundColor">#FEEDE1</item>
            <item name="cometchatThreadHeaderReplyCountTextColor">#F76808</item>
            <item name="cometchatThreadHeaderReplyCountBackgroundColor">#FEEDE1</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatThreadHeaderStyle">@style/CustomThreadHeaderStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatThreadHeader(
        style = CometChatThreadHeaderStyle.default().copy(
            backgroundColor = Color(0xFFFEEDE1),
            replyCountTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: customizes thread header bubble colors and reply count styling.
* **Verify**: open a thread and confirm the header background and reply count colors.

Attribute references:

* [Thread Header attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_thread_header.xml)
* [Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_bubble.xml)

#### Mentions

The `CometChatMentions` styling controls how user mentions appear inside messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/F8Gwgh225UVQ2ohc/images/e2732868-mentions_message_bubble-fccf9cbdd63a54c2f734803e4480418a.png?fit=max&auto=format&n=F8Gwgh225UVQ2ohc&q=85&s=abbf9a0ab4c0dbfb9ce977d869e28f6d" width="1280" height="800" data-path="images/e2732868-mentions_message_bubble-fccf9cbdd63a54c2f734803e4480418a.png" />
</Frame>

What you're changing: mention text and background styles for incoming and outgoing bubbles.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatMentions`
* **Default behavior**: UI Kit default mention styling.
* **Override**: set `cometchatMessageBubbleMentionsStyle` in both incoming and outgoing bubble styles.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomIncomingMessageBubbleMentionStyle" parent="CometChatIncomingBubbleMentionsStyle">
            <item name="cometchatMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
            <item name="cometchatMentionTextColor">#D6409F</item>
            <item name="cometchatMentionBackgroundColor">#D6409F</item>
            <item name="cometchatSelfMentionTextColor">#30A46C</item>
            <item name="cometchatSelfMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
            <item name="cometchatSelfMentionBackgroundColor">#30A46C</item>
        </style>

        <style name="CustomOutgoingMessageBubbleMentionStyle" parent="CometChatOutgoingBubbleMentionsStyle">
            <item name="cometchatMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
            <item name="cometchatMentionTextColor">#FFFFFF</item>
            <item name="cometchatMentionBackgroundColor">#F9F8FD</item>
            <item name="cometchatSelfMentionTextColor">#30A46C</item>
            <item name="cometchatSelfMentionTextAppearance">?attr/cometchatTextAppearanceBodyRegular</item>
            <item name="cometchatSelfMentionBackgroundColor">#30A46C</item>
        </style>

        <style name="CustomIncomingMessageBubbleStyle" parent="CometChatIncomingMessageBubbleStyle">
            <item name="cometchatMessageBubbleMentionsStyle">@style/CustomIncomingMessageBubbleMentionStyle</item>
        </style>

        <style name="CustomOutgoingMessageBubbleStyle" parent="CometChatOutgoingMessageBubbleStyle">
            <item name="cometchatMessageBubbleMentionsStyle">@style/CustomOutgoingMessageBubbleMentionStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatIncomingMessageBubbleStyle">@style/CustomIncomingMessageBubbleStyle</item>
            <item name="cometchatOutgoingMessageBubbleStyle">@style/CustomOutgoingMessageBubbleStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatMessageList(
        style = CometChatMessageListStyle.default().copy(
            incomingMessageBubbleStyle = CometChatIncomingMessageBubbleStyle.default().copy(
                mentionTextColor = Color(0xFFD6409F)
            ),
            outgoingMessageBubbleStyle = CometChatOutgoingMessageBubbleStyle.default().copy(
                mentionTextColor = Color.White
            )
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: customizes mention colors for incoming and outgoing message bubbles.
* **Verify**: send a mention in a chat and check the mention highlight colors.

Attribute references:

* [Mentions attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_mentions.xml)
* [Message Bubble attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_message_bubble.xml)

***

### Calling UI

#### Call Logs

The `CometChatCallLogs` component renders recent call history.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/ZxmcLJEBNpyDHXSo/images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png?fit=max&auto=format&n=ZxmcLJEBNpyDHXSo&q=85&s=55b48b2d31bebf862190281f12f1874f" width="1280" height="800" data-path="images/d0eb378f-calls_styling-72e5f287e16313403492a56094660446.png" />
</Frame>

What you're changing: call log list separators and title colors.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatCallLogs`
* **Default behavior**: UI Kit default call log styling.
* **Override**: set `cometchatCallLogsStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomCallLogStyle" parent="CometChatCallLogsStyle">
            <item name="cometchatCallLogsSeparatorColor">#F76808</item>
            <item name="cometchatCallLogsTitleTextColor">#F76808</item>
            <item name="cometchatCallLogsAvatarStyle">@style/CustomAvatarStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatCallLogsStyle">@style/CustomCallLogStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatCallLogs(
        style = CometChatCallLogsStyle.default().copy(
            separatorColor = Color(0xFFF76808),
            titleTextColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies custom avatar and text colors to the call logs list.
* **Verify**: open Call Logs and confirm the separator and title colors.

Attribute references:

* [Call Logs attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_call_logs.xml)

#### Incoming Call

The `CometChatIncomingCall` component renders the incoming call UI.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/6EtaxcOHA0yKWZ6B/images/d771544a-incoming_call_styled-4a37ea9ee6fd91529ac0dc12725739a7.png?fit=max&auto=format&n=6EtaxcOHA0yKWZ6B&q=85&s=00898bb50e8a51f08c1952b3a66347c2" width="4524" height="3200" data-path="images/d771544a-incoming_call_styled-4a37ea9ee6fd91529ac0dc12725739a7.png" />
</Frame>

What you're changing: incoming call background, buttons, and avatar styling.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatIncomingCall`
* **Default behavior**: UI Kit default incoming call layout and colors.
* **Override**: set `cometchatIncomingCallStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomIncomingCallStyle" parent="CometChatIncomingCallStyle">
            <item name="cometchatIncomingCallBackgroundColor">#AA9EE8</item>
            <item name="cometchatIncomingCallAcceptButtonBackgroundColor">?attr/cometchatPrimaryColor</item>
            <item name="cometchatIncomingCallRejectButtonTextColor">?attr/cometchatErrorColor</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatIncomingCallStyle">@style/CustomIncomingCallStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatIncomingCall(
        call = call,
        style = CometChatIncomingCallStyle.default().copy(
            backgroundColor = Color(0xFFAA9EE8)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: customizes the incoming call screen background and action buttons.
* **Verify**: trigger an incoming call and confirm the background and button colors.

Attribute references:

* [Incoming Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_incoming_call.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

#### Outgoing Call

The `CometChatOutgoingCall` component renders the outgoing call UI.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/g17zegx-VcA6lulj/images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png?fit=max&auto=format&n=g17zegx-VcA6lulj&q=85&s=3aeb743ea83cc1ed696a2bc992ceb051" width="1280" height="800" data-path="images/430add9e-outgoing_call_styling-4478d162278403121a8f89d481625c9e.png" />
</Frame>

What you're changing: outgoing call avatar styling.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatOutgoingCall`
* **Default behavior**: UI Kit default outgoing call styling.
* **Override**: set `cometchatOutgoingCallStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="CustomOutgoingCall" parent="CometChatOutgoingCallStyle">
            <item name="cometchatOutgoingCallAvatarStyle">@style/CustomAvatarStyle</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatOutgoingCallStyle">@style/CustomOutgoingCall</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatOutgoingCall(
        call = call,
        style = CometChatOutgoingCallStyle.default().copy(
            avatarStyle = CometChatAvatarStyle.default().copy(
                backgroundColor = Color(0xFFFBAA75)
            )
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies a custom avatar style to the outgoing call screen.
* **Verify**: place a call and confirm the avatar styling.

Attribute references:

* [Outgoing Call attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_outgoing_call.xml)
* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

***

### Base Components

#### Avatar

The `CometChatAvatar` component is used across lists and headers.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/EmpCvyArIkNI25h1/images/b7ff2aa0-base_component_avatar_styling-c10c14904152585dcf4c46f3a1c0a875.png?fit=max&auto=format&n=EmpCvyArIkNI25h1&q=85&s=a2da8a036f436f585b3c1c31b3878080" width="1280" height="240" data-path="images/b7ff2aa0-base_component_avatar_styling-c10c14904152585dcf4c46f3a1c0a875.png" />
</Frame>

What you're changing: avatar shape and background color.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatAvatar`
* **Default behavior**: UI Kit default avatar styling.
* **Override**: set `cometchatAvatarStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
            <item name="cometchatAvatarStrokeRadius">8dp</item>
            <item name="cometchatAvatarBackgroundColor">#FBAA75</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatAvatarStyle">@style/CustomAvatarStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    // Globally via CometChatConversations, CometChatUsers, etc.
    style = ComponentStyle.default().copy(
        avatarStyle = CometChatAvatarStyle.default().copy(
            backgroundColor = Color(0xFFFBAA75),
            cornerRadius = 8.dp
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies a consistent avatar style across UI Kit components.
* **Verify**: open any list with avatars and confirm the style.

Attribute references:

* [Avatar attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_avatar.xml)

#### Badge

The `CometChatBadge` component shows unread or notification counts.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/KYL4KlE88w2a-VuU/images/c2a0c8d5-base_component_badge_styling-fccd7bebd68b92a1bbcebe7db68b4136.png?fit=max&auto=format&n=KYL4KlE88w2a-VuU&q=85&s=0cde7486bf8d4ebbe629b958fbc50986" width="1280" height="240" data-path="images/c2a0c8d5-base_component_badge_styling-fccd7bebd68b92a1bbcebe7db68b4136.png" />
</Frame>

What you're changing: badge background, text color, and corner radius.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatBadge`
* **Default behavior**: UI Kit default badge styling.
* **Override**: set `cometchatBadgeStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomBadgeStyle" parent="CometChatBadgeStyle">
            <item name="cometchatBadgeBackgroundColor">#F44649</item>
            <item name="cometchatBadgeTextColor">#FFFFFF</item>
            <item name="cometchatBadgeCornerRadius">4dp</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatBadgeStyle">@style/CustomBadgeStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    // Via parent component style
    style = CometChatConversationsStyle.default().copy(
        badgeStyle = CometChatBadgeStyle.default().copy(
            backgroundColor = Color(0xFFF44649),
            textColor = Color.White,
            cornerRadius = 4.dp
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies a custom badge appearance across UI Kit lists.
* **Verify**: check any unread badge to confirm colors and radius.

Attribute references:

* [Badge attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_badge.xml)

#### Status Indicator

The `CometChatStatusIndicator` component shows user presence status.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/0L6R89KI7D3gjTkS/images/3ad97c61-base_component_status_indicator_styling-b6a26bc571a79184023e5b40950bbb53.png?fit=max&auto=format&n=0L6R89KI7D3gjTkS&q=85&s=27375b0db9d29ca1b26c89186141c438" width="1280" height="240" data-path="images/3ad97c61-base_component_status_indicator_styling-b6a26bc571a79184023e5b40950bbb53.png" />
</Frame>

What you're changing: status indicator icon shape and drawable.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatStatusIndicator`
* **Default behavior**: UI Kit default presence icon.
* **Override**: set `cometchatStatusIndicatorStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomStatusIndicatorStyle" parent="CometChatStatusIndicatorStyle">
            <item name="cometchatStatusIndicatorCornerRadius">8dp</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatStatusIndicatorStyle">@style/CustomStatusIndicatorStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    // Via parent component style
    style = ComponentStyle.default().copy(
        statusIndicatorStyle = CometChatStatusIndicatorStyle.default().copy(
            cornerRadius = 8.dp
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies the custom status indicator in UI Kit components.
* **Verify**: check any user list to confirm the presence icon.

Attribute references:

* [Status Indicator attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_status_indicator.xml)

#### Reaction List

The `CometChatReactionList` component renders reactions on messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/g3E3THkvQTdQ1Mu8/images/fcaa0634-base_component_reaction_list_styling-16aceef74885c475b8dc129f3114456d.png?fit=max&auto=format&n=g3E3THkvQTdQ1Mu8&q=85&s=d92a7fdbbe6656d2f54ca787483e9d85" width="1280" height="840" data-path="images/fcaa0634-base_component_reaction_list_styling-16aceef74885c475b8dc129f3114456d.png" />
</Frame>

What you're changing: active tab color in the reaction list.

* **Where to change it**: `res/values/themes.xml` (XML Views) or `style` parameter (Compose)
* **Applies to**: `CometChatReactionList`
* **Default behavior**: UI Kit default reaction list styling.
* **Override**: set `cometchatReactionListStyle` in `AppTheme` or pass a style object.

<Tabs>
  <Tab title="Kotlin (XML Views)">
    ```xml themes.xml lines theme={null}
    <resources>
        <style name="CustomReactionListStyle" parent="CometChatReactionListStyle">
            <item name="cometchatReactionListTabTextActiveColor">#F76808</item>
        </style>

        <style name="AppTheme" parent="CometChatTheme.DayNight">
            <item name="cometchatReactionListStyle">@style/CustomReactionListStyle</item>
        </style>
    </resources>
    ```
  </Tab>

  <Tab title="Jetpack Compose">
    ```kotlin lines theme={null}
    CometChatReactionList(
        style = CometChatReactionListStyle.default().copy(
            tabTextActiveColor = Color(0xFFF76808)
        )
    )
    ```
  </Tab>
</Tabs>

* **What this does**: applies a custom active tab color in the reaction list.
* **Verify**: open reactions and confirm the active tab color.

Attribute references:

* [Reaction List attributes](https://github.com/cometchat/cometchat-uikit-android/blob/v6/chatuikit-kotlin/src/main/res/values/attr_cometchat_reaction_list.xml)

***

## Customization matrix

| What you want to change        | Where                          | Property or API                                    | Example                                        |
| ------------------------------ | ------------------------------ | -------------------------------------------------- | ---------------------------------------------- |
| Conversations avatar and badge | `themes.xml` / style param     | `cometchatConversationsStyle`                      | `cometchatConversationsBadgeStyle`             |
| Users list separators          | `themes.xml` / style param     | `cometchatUsersStyle`                              | `cometchatUsersSeparatorColor`                 |
| Group list titles              | `themes.xml` / style param     | `cometchatGroupsStyle`                             | `cometchatGroupsTitleTextColor`                |
| Header call icons              | `themes.xml` / style param     | `cometchatMessageHeaderStyle`                      | `cometchatMessageHeaderCallButtonsStyle`       |
| Message list background        | `themes.xml` / style param     | `cometchatMessageListStyle`                        | `cometchatMessageListBackgroundColor`          |
| Composer send button           | `res/drawable/` + `themes.xml` | `cometchatMessageComposerActiveSendButtonDrawable` | `@drawable/active_send_button`                 |
| Call buttons styling           | `themes.xml` / style param     | `cometchatCallButtonsStyle`                        | `cometchatCallButtonsVideoCallBackgroundColor` |