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

# Introduction

> Customize CometChat Android UI Kit themes with colors, typography, spacing, component styles, branding, and light or dark mode.

<Accordion title="AI Integration Quick Reference">
  | Field               | Value                                                                                                                                                                        |
  | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Goal                | Customize UI Kit appearance (colors, fonts, dark mode) via Android XML theme attributes                                                                                      |
  | Where               | `app/src/main/res/values/themes.xml` (global) — applied via `android:theme` in `AndroidManifest.xml`                                                                         |
  | Step 1              | Create an app theme extending `CometChatTheme.DayNight`                                                                                                                      |
  | Step 2              | Override theme attributes (`cometchatPrimaryColor`, `cometchatBackgroundColor1`, etc.) in your theme                                                                         |
  | Step 3 (dark mode)  | Create `app/src/main/res/values-night/themes.xml` and override attributes for dark mode                                                                                      |
  | Key attributes      | `cometchatPrimaryColor`, `cometchatBackgroundColor1`, `cometchatBackgroundColor2`, `cometchatTextColorPrimary`, `cometchatTextColorSecondary`, `cometchatStrokeColorDefault` |
  | Constraints         | Must extend `CometChatTheme.DayNight` as parent theme; activity-level overrides beat application-level                                                                       |
  | Full attribute list | [Theme attributes on GitHub](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml)                            |
</Accordion>

Create and apply a global CometChat UI Kit theme that matches your brand across light and dark modes.

## When to use this

* You want a single UI Kit theme that matches your app branding.
* You need light and dark mode support with consistent colors.
* You want to customize primary, background, or text colors across UI Kit.
* You want a different UI Kit theme for a specific activity.

## Prerequisites

* CometChat UI Kit for Android is installed and initialized.
* You can edit `app/src/main/res/values/themes.xml`.
* You can edit `AndroidManifest.xml`.
* Optional: You can create `app/src/main/res/values-night/themes.xml` for dark mode overrides.

## Quick start

<Steps>
  <Step title="Create or update your theme">
    File: `app/src/main/res/values/themes.xml`. Extend `CometChatTheme.DayNight` as the base theme.
  </Step>

  <Step title="Apply the theme to the app">
    File: `AndroidManifest.xml`. Set `android:theme` on the `<application>` element.
  </Step>

  <Step title="Optional: Apply a theme to a specific activity">
    File: `AndroidManifest.xml`. Set `android:theme` on a specific `<activity>` if needed.
  </Step>

  <Step title="Override key theme attributes">
    File: `app/src/main/res/values/themes.xml`. Update `cometchatPrimaryColor` and other attributes.
  </Step>

  <Step title="Optional: Add dark mode overrides">
    File: `app/src/main/res/values-night/themes.xml`. Override attributes for dark mode.
  </Step>

  <Step title="Build and verify">
    Run the app and confirm UI Kit screens use your colors in light and dark mode.
  </Step>
</Steps>

## Core concepts

* `CometChatTheme.DayNight`: Base UI Kit theme built on `Theme.MaterialComponents.DayNight.NoActionBar`.
* Theme attributes: `cometchatPrimaryColor`, `cometchatBackgroundColor1`, `cometchatTextColorPrimary`, and others.
* `values-night`: Android resource folder for dark mode overrides.

***

## Theming Contract

**Inputs**

* Base theme: `CometChatTheme.DayNight` as the parent of your app theme
* Global theme attributes in `app/src/main/res/values/themes.xml`
* Activity-scoped theme via `android:theme` on a specific `<activity>` in `AndroidManifest.xml`
* Optional dark mode overrides in `app/src/main/res/values-night/themes.xml`

**Precedence**

1. Activity-level theme (most specific)
2. Application-level theme (`android:theme` on `<application>`)
3. `CometChatTheme.DayNight` defaults (least specific)

**Outputs**

* `cometchatPrimaryColor` changes buttons, highlights, and interactive elements
* `cometchatBackgroundColor1` / `cometchatBackgroundColor2` change panel and surface backgrounds
* `cometchatTextColorPrimary` / `cometchatTextColorSecondary` change text across the UI
* `cometchatStrokeColorDefault` changes borders and dividers
* Dark mode values from `values-night` apply automatically when the system uses night mode

***

## Implementation

### Create an app theme that extends `CometChatTheme.DayNight`

What you're changing: The base theme used by UI Kit components.

* **Where to change it**: `app/src/main/res/values/themes.xml`.
* **Applies to**: All UI Kit components.
* **Default behavior**: UI Kit uses `CometChatTheme.DayNight`.
* **Override**: Define your app theme and set `parent="CometChatTheme.DayNight"`.
* **Code**:

```xml themes.xml lines theme={null}
<resources>
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <!-- Your customizations go here -->
    </style>
</resources>
```

* **What this does**: Creates an app theme that inherits all UI Kit styling.
* **Verify**: UI Kit screens render correctly after the theme is applied.

### Apply the theme to your application

What you're changing: The theme applied to the entire app.

* **Where to change it**: `AndroidManifest.xml`.

* **Applies to**: All activities unless overridden.

* **Default behavior**: The application theme is not set to your UI Kit theme.

* **Override**: Set `android:theme` on the `<application>` element.

* **Code**:

```xml AndroidManifest.xml lines theme={null}
<application
    android:name=".YourApplication"
    android:theme="@style/AppTheme"
    ...>
    <!-- Your activities -->
</application>
```

* **What this does**: Applies `AppTheme` to every activity by default.

* **Verify**: Launch any UI Kit screen and confirm the theme is applied.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/Sa9o3dFd0TJV05JN/images/42da9194-introduction_theming_default-b29d82f803cd9092f10d0a72a35f4f62.png?fit=max&auto=format&n=Sa9o3dFd0TJV05JN&q=85&s=755c13816428a916e7c944e830cb7858" width="1440" height="833" data-path="images/42da9194-introduction_theming_default-b29d82f803cd9092f10d0a72a35f4f62.png" />
</Frame>

### Apply a theme to a specific activity

What you're changing: The theme for a single activity.

* **Where to change it**: `AndroidManifest.xml`.

* **Applies to**: Only the targeted activity.

* **Default behavior**: Activities inherit the application theme.

* **Override**: Set `android:theme` on the `<activity>` element.

* **Code**:

```xml AndroidManifest.xml lines theme={null}
<application
    android:theme="@style/AppTheme"
    ...>

    <activity
        android:name=".ChatActivity"
        android:theme="@style/ChatTheme" />

</application>
```

* **What this does**: Applies `ChatTheme` only to `ChatActivity`.

* **Verify**: Open `ChatActivity` and confirm the theme differs from the rest of the app.

### Change the primary color

What you're changing: The primary brand color used across UI Kit.

* **Where to change it**: `app/src/main/res/values/themes.xml`.

* **Applies to**: Buttons, highlights, and interactive elements.

* **Default behavior**: UI Kit uses the default primary color.

* **Override**: Set `cometchatPrimaryColor` in your theme.

* **Code**:

```xml themes.xml lines theme={null}
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#F76808</item>
</style>
```

* **What this does**: Replaces the UI Kit primary color with your brand color.

* **Verify**: Buttons and highlights use the new color.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-card-builder/tZ9icCqOV58QJidg/images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png?fit=max&auto=format&n=tZ9icCqOV58QJidg&q=85&s=baf2322914c454f055fbaf407a704743" width="1440" height="833" data-path="images/e6e0caaf-introduction_theming_primary_change-b6047b7a97046c3abf385ff1fec54e5a.png" />
</Frame>

### Customize common theme attributes

What you're changing: Background, text, and stroke colors.

* **Where to change it**: `app/src/main/res/values/themes.xml`.

* **Applies to**: All UI Kit components that use these attributes.

* **Default behavior**: UI Kit uses its default theme values.

* **Override**: Define the attributes in your app theme.

* **Code**:

```xml themes.xml lines theme={null}
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <!-- Primary brand color -->
    <item name="cometchatPrimaryColor">#6851D6</item>

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

    <!-- Text colors -->
    <item name="cometchatTextColorPrimary">#000000</item>
    <item name="cometchatTextColorSecondary">#666666</item>

    <!-- Border and divider colors -->
    <item name="cometchatStrokeColorDefault">#E0E0E0</item>
</style>
```

* **What this does**: Updates common UI Kit colors in one place.

* **Verify**: Backgrounds, text, and dividers reflect the new values.

### Add dark mode overrides

What you're changing: Theme values used in dark mode.

* **Where to change it**: `app/src/main/res/values-night/themes.xml`.

* **Applies to**: Dark mode only.

* **Default behavior**: Dark mode uses the same values as light mode.

* **Override**: Create `values-night/themes.xml` and override the attributes.

* **Code**:

```xml values-night/themes.xml lines theme={null}
<resources>
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <!-- Dark mode colors -->
        <item name="cometchatPrimaryColor">#8B7FFF</item>
        <item name="cometchatBackgroundColor1">#1A1A1A</item>
        <item name="cometchatTextColorPrimary">#FFFFFF</item>
    </style>
</resources>
```

* **What this does**: Applies dark mode colors when the system uses night mode.

* **Verify**: Toggle dark mode on the device and confirm UI Kit colors update.

<Note>
  For a complete list of theme attributes, visit the [theme attributes file](https://github.com/cometchat/cometchat-uikit-android/blob/v5/chatuikit/src/main/res/values/attr_cometchat_theme.xml) on GitHub.
</Note>

## Customization matrix

| What you want to change      | Where                                      | Property/API                       | Example                                                    |
| ---------------------------- | ------------------------------------------ | ---------------------------------- | ---------------------------------------------------------- |
| Base UI Kit theme            | `app/src/main/res/values/themes.xml`       | `parent="CometChatTheme.DayNight"` | `<style name="AppTheme" parent="CometChatTheme.DayNight">` |
| App theme in manifest        | `AndroidManifest.xml`                      | `android:theme`                    | `android:theme="@style/AppTheme"`                          |
| Activity-specific theme      | `AndroidManifest.xml`                      | `android:theme`                    | `android:theme="@style/ChatTheme"`                         |
| Primary color                | `app/src/main/res/values/themes.xml`       | `cometchatPrimaryColor`            | `<item name="cometchatPrimaryColor">#F76808</item>`        |
| Background color             | `app/src/main/res/values/themes.xml`       | `cometchatBackgroundColor1`        | `<item name="cometchatBackgroundColor1">#FFFFFF</item>`    |
| Secondary background color   | `app/src/main/res/values/themes.xml`       | `cometchatBackgroundColor2`        | `<item name="cometchatBackgroundColor2">#F5F5F5</item>`    |
| Primary text color           | `app/src/main/res/values/themes.xml`       | `cometchatTextColorPrimary`        | `<item name="cometchatTextColorPrimary">#000000</item>`    |
| Secondary text color         | `app/src/main/res/values/themes.xml`       | `cometchatTextColorSecondary`      | `<item name="cometchatTextColorSecondary">#666666</item>`  |
| Divider/stroke color         | `app/src/main/res/values/themes.xml`       | `cometchatStrokeColorDefault`      | `<item name="cometchatStrokeColorDefault">#E0E0E0</item>`  |
| Dark mode primary color      | `app/src/main/res/values-night/themes.xml` | `cometchatPrimaryColor`            | `<item name="cometchatPrimaryColor">#8B7FFF</item>`        |
| Dark mode background color   | `app/src/main/res/values-night/themes.xml` | `cometchatBackgroundColor1`        | `<item name="cometchatBackgroundColor1">#1A1A1A</item>`    |
| Dark mode primary text color | `app/src/main/res/values-night/themes.xml` | `cometchatTextColorPrimary`        | `<item name="cometchatTextColorPrimary">#FFFFFF</item>`    |