> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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/v5/theme-introduction) — Full theming reference for the UI Kit.
* [Component Styling](/ui-kit/android/v5/component-styling) — Detailed per-component style attribute reference.
* [Customization Overview](/ui-kit/android/v5/customization-overview) — See all customization categories.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.