Introduction

​

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

​

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

• 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

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

• 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

• 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:

<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

• 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:

<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.

​

Apply a theme to a specific 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:

<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

• 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:

<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.

​

Customize common theme attributes

• 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:

<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

• 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:

<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.

​

Customization matrix