---
name: cometchat-android-v5-theming
description: "Customize CometChat UI to match your app's design system. Covers CometChatTheme, XML attributes, style classes, dark mode, and color system."
license: "MIT"
compatibility: "Android 7.0+; Java 8+; Kotlin 1.8+; com.cometchat:chat-uikit-android:5.x"
allowed-tools: "executeBash, readFile, fileSearch, listDirectory"
metadata:
  author: "CometChat"
  version: "3.0.0"
  tags: "cometchat android theming customization branding dark-mode colors styles"
---

> **Companion skills:** `cometchat-android-v5-core` covers initialization;
> `cometchat-android-v5-components` provides the component catalog;
> `cometchat-android-v5-customization` covers deeper component-level overrides.

## Purpose

This skill teaches how to theme CometChat Android UI Kit v5 to match your app's design system. CometChat uses a combination of XML theme attributes, the `CometChatTheme` static class, and per-component style resources.

---

## Use this skill when

- Changing CometChat colors to match brand
- Customizing fonts or typography
- Enabling dark mode
- Applying per-component styles
- "How do I change the primary color?"
- "How do I make CometChat match my app theme?"

## Do not use this skill when

- Writing custom message templates → use `cometchat-android-v5-customization`
- Adding features → use `cometchat-android-v5-features`

---

## 1. How CometChat theming works

CometChat's visual identity is driven by XML theme attributes defined in `attrs.xml` files. Every `CometChat*` component reads these attributes from the current theme. To override: define the attributes in your app's theme.

### The CometChatTheme class

`CometChatTheme` is a static utility class that provides programmatic access to theme colors. It reads from XML theme attributes and supports runtime overrides.

**Key static methods:**

| Method | Description |
|---|---|
| `setPrimaryColor(int)` | Override primary color at runtime |
| `getPrimaryColor(Context)` | Get current primary color |
| `getExtendedPrimaryColor50(Context)` through `getExtendedPrimaryColor900(Context)` | Get extended primary color shades (auto-generated from primary) |
| `getBackgroundColor1(Context)` | Primary background color |
| `getTextColorPrimary(Context)` | Primary text color |
| `getTextColorSecondary(Context)` | Secondary text color |
| `getIconTintHighlight(Context)` | Highlighted icon tint |
| `getIconTintSecondary(Context)` | Secondary icon tint |

### Setting primary color programmatically

**Java:**
```java
CometChatTheme.setPrimaryColor(Color.parseColor("#6C63FF"));
```

**Kotlin:**
```kotlin
CometChatTheme.setPrimaryColor(Color.parseColor("#6C63FF"))
```

This must be called before any CometChat component is inflated. The extended color shades (50–900) are auto-generated by blending the primary color with white (light mode) or black (dark mode).

---

## 2. XML theme attributes

Override CometChat colors in your app's `themes.xml`:

```xml
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <!-- CometChat primary color -->
    <item name="cometchatPrimaryColor">#6C63FF</item>

    <!-- Background colors -->
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatBackgroundColor2">#F5F5F5</item>

    <!-- Text colors -->
    <item name="cometchatTextColorPrimary">#141414</item>
    <item name="cometchatTextColorSecondary">#727272</item>

    <!-- Extended primary shades (optional — auto-generated if not set) -->
    <item name="cometchatExtendedPrimaryColor50">#F0EEFF</item>
    <item name="cometchatExtendedPrimaryColor100">#D9D5FF</item>
</style>
```

---

## 3. Per-component styles

Each component has its own style attribute that can be overridden in your theme. The naming convention is `cometchat<ComponentName>Style`.

| Component | Style attribute | Example |
|---|---|---|
| `CometChatConversations` | `cometchatConversationsStyle` | `@style/CustomConversationsStyle` |
| `CometChatMessageList` | `cometchatMessageListStyle` | `@style/CustomMessageListStyle` |
| `CometChatMessageComposer` | `cometchatMessageComposerStyle` | `@style/CustomComposerStyle` |
| `CometChatMessageHeader` | `cometchatMessageHeaderStyle` | `@style/CustomHeaderStyle` |
| `CometChatUsers` | `cometchatUsersStyle` | `@style/CustomUsersStyle` |
| `CometChatGroups` | `cometchatGroupsStyle` | `@style/CustomGroupsStyle` |
| `CometChatAvatar` | `cometchatAvatarStyle` | `@style/CustomAvatarStyle` |
| `CometChatBadge` | `cometchatBadgeStyle` | `@style/CustomBadgeStyle` |
| `CometChatStatusIndicator` | `cometchatStatusIndicatorStyle` | `@style/CustomStatusStyle` |
| `CometChatMessageReceipt` | `cometchatMessageReceiptStyle` | `@style/CustomReceiptStyle` |

---

## 4. Programmatic styling

Every component exposes setter methods for colors, text appearances, and drawables:

**Java:**
```java
CometChatConversations conversations = findViewById(R.id.conversations);
conversations.setBackgroundColor(Color.WHITE);
conversations.setTitleTextColor(Color.BLACK);
conversations.setTitleTextAppearance(R.style.MyTitleStyle);
conversations.setSeparatorColor(Color.LTGRAY);
conversations.setAvatarStyle(R.style.MyAvatarStyle);
conversations.setStatusIndicatorStyle(R.style.MyStatusStyle);
```

---

## 5. Dark mode

CometChat respects Android's `DayNight` theme. Define separate values in `values-night/themes.xml`:

```xml
<!-- values/themes.xml (light) -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#6C63FF</item>
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatTextColorPrimary">#141414</item>
</style>

<!-- values-night/themes.xml (dark) -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#7B73FF</item>
    <item name="cometchatBackgroundColor1">#1A1A2E</item>
    <item name="cometchatTextColorPrimary">#E0E0E0</item>
</style>
```

The `CometChatTheme` class auto-detects the current night mode and adjusts extended color shades accordingly.

---

## Hard rules

- **Set primary color BEFORE inflating components.** `CometChatTheme.setPrimaryColor()` must be called before `setContentView()` or component inflation.
- **Use XML theme attributes for global overrides.** Per-component setters are for fine-tuning.
- **Extended primary shades are auto-generated.** Only override them if you need exact brand colors at each shade level.
- **Dark mode uses `values-night/`.** Follow Android's standard `DayNight` theme pattern.