Skip to main content
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, cometchatBackgroundColor, cometchatTextColorPrimary, and others.
  • values-night: Android resource folder for dark mode overrides.

​
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="cometchatBackgroundColor">#FFFFFF</item>
    <item name="cometchatBackgroundColorSecondary">#F5F5F5</item>

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

    <!-- Border and divider colors -->
    <item name="cometchatStrokeColor">#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="cometchatBackgroundColor">#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.xmlcometchatBackgroundColor<item name="cometchatBackgroundColor">#FFFFFF</item>
Secondary background colorapp/src/main/res/values/themes.xmlcometchatBackgroundColorSecondary<item name="cometchatBackgroundColorSecondary">#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.xmlcometchatStrokeColor<item name="cometchatStrokeColor">#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.xmlcometchatBackgroundColor<item name="cometchatBackgroundColor">#1A1A1A</item>
Dark mode primary text colorapp/src/main/res/values-night/themes.xmlcometchatTextColorPrimary<item name="cometchatTextColorPrimary">#FFFFFF</item>

​
Common pitfalls and fixes

  • Theme not applied: Confirm android:theme is set on the <application> element.
  • Activity theme not changing: Ensure the activity has its own android:theme attribute.
  • Colors not updating: Make sure the attributes are defined under your theme that extends CometChatTheme.DayNight.
  • Dark mode not working: Add values-night/themes.xml and place overrides there.
  • Unexpected colors in dark mode: Check for conflicting values in values and values-night resources.
  • UI Kit still shows defaults: Rebuild and relaunch the app after theme changes.

​
FAQ

Q: Do I have to use CometChatTheme.DayNight?
A: Yes. It is the base UI Kit theme and must be the parent of your app theme. Q: Can I have a different theme for chat screens only?
A: Yes. Set android:theme on the specific activity in AndroidManifest.xml. Q: Where can I find all available theme attributes?
A: Use the theme attributes file.