Skip to main content
Use CometChat UI Kit color resources to keep a consistent visual identity in light and dark modes.

​
When to use this

  • You want to review the default UI Kit color palette.
  • You need consistent colors across text, buttons, backgrounds, and icons.
  • You want to override the primary brand color via theming.
  • You want light and dark mode color consistency.

​
Prerequisites

  • CometChat UI Kit for Android is installed and initialized.
  • You can edit app/src/main/res/values/color.xml and app/src/main/res/values-night/color.xml.
  • You can edit app/src/main/res/values/themes.xml.
  • Your app theme extends CometChatTheme.DayNight.

​
Quick start

1

Review light mode colors

File: app/src/main/res/values/color.xml.
2

Review dark mode colors

File: app/src/main/res/values-night/color.xml.
3

Override the UI Kit primary color

File: app/src/main/res/values/themes.xml. Set cometchatPrimaryColor.
4

Apply your theme

File: AndroidManifest.xml. Set android:theme on <application>.
5

Build and verify

Run the app and confirm UI Kit screens match your palette in light and dark mode.

​
Core concepts

  • Primary colors define the main theme of the UI.
  • Neutral colors are used for backgrounds, strokes, and secondary elements.
  • Alert colors highlight success, warning, error, or info states.
  • Text and icon colors control typography and icon appearance.
  • Light mode colors live in res/values/color.xml and dark mode colors in res/values-night/color.xml.

​
Implementation

​
Review the default light mode colors

What you’re changing: The color resources used in light mode.
  • Where to change it: app/src/main/res/values/color.xml.
  • Applies to: Light mode only.
  • Default behavior: UI Kit uses its predefined light mode palette.
  • Override: Edit the values or reference them in your theme.
  • Code:
color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="cometchat_color_primary">#6852D6</color>
    <color name="cometchat_color_neutral_50">#FFFFFF</color>
    <color name="cometchat_color_neutral_900">#141414</color>
    <color name="cometchat_color_text_primary">@color/cometchat_color_neutral_900</color>
    <!-- Other color definitions -->
</resources>
  • What this does: Shows the default light mode color definitions used by UI Kit.
  • Verify: Light mode UI Kit screens match these colors.

​
Review the default dark mode colors

What you’re changing: The color resources used in dark mode.
  • Where to change it: app/src/main/res/values-night/color.xml.
  • Applies to: Dark mode only.
  • Default behavior: UI Kit uses its predefined dark mode palette.
  • Override: Edit the values or reference them in your theme.
  • Code:
values-night/color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="cometchat_color_primary">#6852D6</color>
    <color name="cometchat_color_neutral_50">#141414</color>
    <color name="cometchat_color_neutral_900">#FFFFFF</color>
    <color name="cometchat_color_text_primary">@color/cometchat_color_neutral_900</color>
    <!-- Other color definitions -->
</resources>
  • What this does: Shows the default dark mode color definitions used by UI Kit.
  • Verify: Dark mode UI Kit screens match these colors.
To view the complete list of colors for both light and dark modes, use the Light mode colors and Dark mode colors.

​
Override the primary color via your theme

What you’re changing: The UI Kit primary color.
  • Where to change it: app/src/main/res/values/themes.xml.
  • Applies to: All UI Kit components.
  • Default behavior: UI Kit uses the default primary color.
  • Override: Set cometchatPrimaryColor in your app theme.
  • Code:
themes.xml
<!-- 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 custom value.
  • Verify: Buttons and highlights use the new primary color.

​
Apply your theme in the manifest

What you’re changing: The theme applied to your 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:theme="@style/AppTheme">
</application>
  • What this does: Applies your theme to all app activities.
  • Verify: UI Kit screens use your updated theme colors.

​
Customization matrix

What you want to changeWhereProperty/APIExample
Light mode paletteapp/src/main/res/values/color.xmlcometchat_color_primary<color name="cometchat_color_primary">#6852D6</color>
Dark mode paletteapp/src/main/res/values-night/color.xmlcometchat_color_primary<color name="cometchat_color_primary">#6852D6</color>
Primary color overrideapp/src/main/res/values/themes.xmlcometchatPrimaryColor<item name="cometchatPrimaryColor">#F76808</item>
Apply themeAndroidManifest.xmlandroid:themeandroid:theme="@style/AppTheme"

​
Common pitfalls and fixes

  • Colors do not change: Confirm your app theme extends CometChatTheme.DayNight.
  • Dark mode colors not applied: Ensure res/values-night/color.xml exists.
  • Custom primary color not showing: Verify cometchatPrimaryColor is set in your theme.
  • UI Kit still uses defaults: Rebuild the app after resource changes.
  • Theme not applied: Check android:theme in AndroidManifest.xml.

​
FAQ

Q: Can I edit the UI Kit color XML directly?
A: You can reference or override colors in your app resources; UI Kit will read them at runtime. Q: Do I need separate colors for dark mode?
A: Yes. Use res/values-night/color.xml for dark mode overrides. Q: Where can I see all default colors?
A: Use the Light mode colors and Dark mode colors.