Skip to main content
FieldValue
GoalCustomize UI Kit appearance (colors, fonts, dark mode) via Android XML theme attributes
Whereapp/src/main/res/values/themes.xml (global) — applied via android:theme in AndroidManifest.xml
Step 1Create an app theme extending CometChatTheme.DayNight
Step 2Override 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 attributescometchatPrimaryColor, cometchatBackgroundColor1, cometchatBackgroundColor2, cometchatTextColorPrimary, cometchatTextColorSecondary, cometchatStrokeColorDefault
ConstraintsMust extend CometChatTheme.DayNight as parent theme; activity-level overrides beat application-level
Full attribute listTheme attributes on GitHub
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

1

Create or update your theme

File: app/src/main/res/values/themes.xml. Extend CometChatTheme.DayNight as the base theme.
2

Apply the theme to the app

File: AndroidManifest.xml. Set android:theme on the <application> element.
3

Optional: Apply a theme to a specific activity

File: AndroidManifest.xml. Set android:theme on a specific <activity> if needed.
4

Override key theme attributes

File: app/src/main/res/values/themes.xml. Update cometchatPrimaryColor and other attributes.
5

Optional: Add dark mode overrides

File: app/src/main/res/values-night/themes.xml. Override attributes for dark mode.
6

Build and verify

Run the app and confirm UI Kit screens use your colors in light and dark mode.

​
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:
themes.xml
<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:
AndroidManifest.xml
<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

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:
AndroidManifest.xml
<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:
themes.xml
<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

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:
themes.xml
<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:
values-night/themes.xml
<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.
For a complete list of theme attributes, visit the theme attributes file on GitHub.

​
Customization matrix

What you want to changeWhereProperty/APIExample
Base UI Kit themeapp/src/main/res/values/themes.xmlparent="CometChatTheme.DayNight"<style name="AppTheme" parent="CometChatTheme.DayNight">
App theme in manifestAndroidManifest.xmlandroid:themeandroid:theme="@style/AppTheme"
Activity-specific themeAndroidManifest.xmlandroid:themeandroid:theme="@style/ChatTheme"
Primary colorapp/src/main/res/values/themes.xmlcometchatPrimaryColor<item name="cometchatPrimaryColor">#F76808</item>
Background colorapp/src/main/res/values/themes.xmlcometchatBackgroundColor1<item name="cometchatBackgroundColor1">#FFFFFF</item>
Secondary background colorapp/src/main/res/values/themes.xmlcometchatBackgroundColor2<item name="cometchatBackgroundColor2">#F5F5F5</item>
Primary text colorapp/src/main/res/values/themes.xmlcometchatTextColorPrimary<item name="cometchatTextColorPrimary">#000000</item>
Secondary text colorapp/src/main/res/values/themes.xmlcometchatTextColorSecondary<item name="cometchatTextColorSecondary">#666666</item>
Divider/stroke colorapp/src/main/res/values/themes.xmlcometchatStrokeColorDefault<item name="cometchatStrokeColorDefault">#E0E0E0</item>
Dark mode primary colorapp/src/main/res/values-night/themes.xmlcometchatPrimaryColor<item name="cometchatPrimaryColor">#8B7FFF</item>
Dark mode background colorapp/src/main/res/values-night/themes.xmlcometchatBackgroundColor1<item name="cometchatBackgroundColor1">#1A1A1A</item>
Dark mode primary text colorapp/src/main/res/values-night/themes.xmlcometchatTextColorPrimary<item name="cometchatTextColorPrimary">#FFFFFF</item>