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

# Styles

> Customize component appearance using XML theme attributes or programmatic setter methods to match your app's brand.

The UI Kit supports two approaches to styling: XML theme attributes for declarative, app-wide theming, and programmatic setters for runtime customization.

<Warning>
  Programmatic setters take precedence over XML theme attributes when both are applied to the same property.
</Warning>

## XML Theme Hierarchy

The theming system follows a three-level hierarchy:

1. Your `AppTheme` extends `CometChatTheme.DayNight` (theme-level colors and fonts)
2. Component styles extend parent styles (e.g., `cometchatConversationsStyle`)
3. Sub-component styles are nested within component styles (e.g., avatar style within conversations)

```xml theme={null}
<!-- Level 1: Theme-level colors -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#6851D6</item>
    <item name="cometchatErrorColor">#FF3B30</item>
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatFontRegular">@font/my_regular_font</item>
    <item name="cometchatFontMedium">@font/my_medium_font</item>
    <item name="cometchatFontBold">@font/my_bold_font</item>

    <!-- Level 2: Component-level style -->
    <item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
</style>

<!-- Level 2: Component style -->
<style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
    <item name="cometchatBackgroundColor">#F5F5F5</item>
    <item name="cometchatSeparatorColor">#E0E0E0</item>

    <!-- Level 3: Sub-component style -->
    <item name="cometchatAvatarStyle">@style/CustomAvatarStyle</item>
</style>

<!-- Level 3: Sub-component style -->
<style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
    <item name="cometchatCornerRadius">12dp</item>
    <item name="cometchatBackgroundColor">#E8E0FF</item>
</style>
```

## Font Customization

Override fonts at the theme level using these attributes:

| Attribute              | Usage                                     |
| ---------------------- | ----------------------------------------- |
| `cometchatFontBold`    | Headings, titles, and emphasized text     |
| `cometchatFontMedium`  | Subtitles and secondary headings          |
| `cometchatFontRegular` | Body text, descriptions, and input fields |

## Programmatic Styling with CometChatTheme

The `CometChatTheme` class provides static setter/getter methods for runtime color and typography token overrides:

### Color Tokens

| Method                                                  | Description                                                 |
| ------------------------------------------------------- | ----------------------------------------------------------- |
| `setPrimaryColor(int)`                                  | Primary brand color used for buttons, links, and highlights |
| `setErrorColor(int)`                                    | Error state color                                           |
| `setSuccessColor(int)`                                  | Success state color                                         |
| `setWarningColor(int)`                                  | Warning state color                                         |
| `setInfoColor(int)`                                     | Informational state color                                   |
| `setBackgroundColor1(int)` – `setBackgroundColor4(int)` | Background color levels                                     |
| `setTextColorPrimary(int)`                              | Primary text color                                          |
| `setTextColorSecondary(int)`                            | Secondary text color                                        |
| `setTextColorTertiary(int)`                             | Tertiary text color                                         |
| `setTextColorDisabled(int)`                             | Disabled text color                                         |
| `setTextColorWhite(int)`                                | White text color                                            |
| `setTextColorHighlight(int)`                            | Highlighted text color                                      |

### Icon Tints

| Method                      | Description           |
| --------------------------- | --------------------- |
| `setIconTintPrimary(int)`   | Primary icon tint     |
| `setIconTintSecondary(int)` | Secondary icon tint   |
| `setIconTintTertiary(int)`  | Tertiary icon tint    |
| `setIconTintWhite(int)`     | White icon tint       |
| `setIconTintHighlight(int)` | Highlighted icon tint |

### Button Colors

| Method                                   | Description                 |
| ---------------------------------------- | --------------------------- |
| `setPrimaryButtonBackgroundColor(int)`   | Primary button background   |
| `setPrimaryButtonTextColor(int)`         | Primary button text         |
| `setSecondaryButtonBackgroundColor(int)` | Secondary button background |
| `setSecondaryButtonTextColor(int)`       | Secondary button text       |

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    // Override theme colors at runtime
    CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"))
    CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"))
    CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"))
    CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"))
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    // Override theme colors at runtime
    CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"));
    CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"));
    CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"));
    CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"));
    ```
  </Tab>
</Tabs>

## Component Style Setters

Each component exposes setter methods for its own style and sub-component styles. Using `CometChatConversations` as an example:

| Method                                   | Applies To                      |
| ---------------------------------------- | ------------------------------- |
| `setStyle(@StyleRes int)`                | The component's own style       |
| `setAvatarStyle(@StyleRes int)`          | Avatar sub-component            |
| `setBadgeStyle(@StyleRes int)`           | Unread badge sub-component      |
| `setReceiptStyle(@StyleRes int)`         | Message receipt icons           |
| `setTypingIndicatorStyle(@StyleRes int)` | Typing indicator                |
| `setMentionsStyle(@StyleRes int)`        | Mentions formatting             |
| `setStatusIndicatorStyle(@StyleRes int)` | Online/offline status indicator |
| `setDateStyle(@StyleRes int)`            | Date/time label                 |

<Tabs>
  <Tab title="Kotlin">
    ```kotlin theme={null}
    val conversations = CometChatConversations(context)
    conversations.setStyle(R.style.CustomConversationsStyle)
    conversations.setAvatarStyle(R.style.CustomAvatarStyle)
    conversations.setBadgeStyle(R.style.CustomBadgeStyle)
    ```
  </Tab>

  <Tab title="Java">
    ```java theme={null}
    CometChatConversations conversations = new CometChatConversations(context);
    conversations.setStyle(R.style.CustomConversationsStyle);
    conversations.setAvatarStyle(R.style.CustomAvatarStyle);
    conversations.setBadgeStyle(R.style.CustomBadgeStyle);
    ```
  </Tab>
</Tabs>

## Related

* [Theming Introduction](/ui-kit/android/theme-introduction) — Full theming reference for the UI Kit.
* [Component Styling](/ui-kit/android/component-styling) — Detailed per-component style attribute reference.
* [Customization Overview](/ui-kit/android/customization-overview) — See all customization categories.