cometchat-android-v5-theming

Companion skills: cometchat-android-v5-core covers initialization; cometchat-android-v5-components provides the component catalog; cometchat-android-v5-customization covers deeper component-level overrides.

Purpose

This skill teaches how to theme CometChat Android UI Kit v5 to match your app's design system. CometChat uses a combination of XML theme attributes, the CometChatTheme static class, and per-component style resources.

Use this skill when

Changing CometChat colors to match brand
Customizing fonts or typography
Enabling dark mode
Applying per-component styles
"How do I change the primary color?"
"How do I make CometChat match my app theme?"

Do not use this skill when

Writing custom message templates → use cometchat-android-v5-customization
Adding features → use cometchat-android-v5-features

1. How CometChat theming works

CometChat's visual identity is driven by XML theme attributes defined in attrs.xml files. Every CometChat* component reads these attributes from the current theme. To override: define the attributes in your app's theme.

The CometChatTheme class

CometChatTheme is a static utility class that provides programmatic access to theme colors. It reads from XML theme attributes and supports runtime overrides.

Key static methods:

Method	Description
`setPrimaryColor(int)`	Override primary color at runtime
`getPrimaryColor(Context)`	Get current primary color
`getExtendedPrimaryColor50(Context)` through `getExtendedPrimaryColor900(Context)`	Get extended primary color shades (auto-generated from primary)
`getBackgroundColor1(Context)`	Primary background color
`getTextColorPrimary(Context)`	Primary text color
`getTextColorSecondary(Context)`	Secondary text color
`getIconTintHighlight(Context)`	Highlighted icon tint
`getIconTintSecondary(Context)`	Secondary icon tint

Setting primary color programmatically

Java:

CometChatTheme.setPrimaryColor(Color.parseColor("#6C63FF"));

Kotlin:

CometChatTheme.setPrimaryColor(Color.parseColor("#6C63FF"))

This must be called before any CometChat component is inflated. The extended color shades (50–900) are auto-generated by blending the primary color with white (light mode) or black (dark mode).

2. XML theme attributes

Override CometChat colors in your app's themes.xml:

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <!-- CometChat primary color -->
    <item name="cometchatPrimaryColor">#6C63FF</item>

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

    <!-- Text colors -->
    <item name="cometchatTextColorPrimary">#141414</item>
    <item name="cometchatTextColorSecondary">#727272</item>

    <!-- Extended primary shades (optional — auto-generated if not set) -->
    <item name="cometchatExtendedPrimaryColor50">#F0EEFF</item>
    <item name="cometchatExtendedPrimaryColor100">#D9D5FF</item>
</style>

3. Per-component styles

Each component has its own style attribute that can be overridden in your theme. The naming convention is cometchat<ComponentName>Style.

Component	Style attribute	Example
`CometChatConversations`	`cometchatConversationsStyle`	`@style/CustomConversationsStyle`
`CometChatMessageList`	`cometchatMessageListStyle`	`@style/CustomMessageListStyle`
`CometChatMessageComposer`	`cometchatMessageComposerStyle`	`@style/CustomComposerStyle`
`CometChatMessageHeader`	`cometchatMessageHeaderStyle`	`@style/CustomHeaderStyle`
`CometChatUsers`	`cometchatUsersStyle`	`@style/CustomUsersStyle`
`CometChatGroups`	`cometchatGroupsStyle`	`@style/CustomGroupsStyle`
`CometChatAvatar`	`cometchatAvatarStyle`	`@style/CustomAvatarStyle`
`CometChatBadge`	`cometchatBadgeStyle`	`@style/CustomBadgeStyle`
`CometChatStatusIndicator`	`cometchatStatusIndicatorStyle`	`@style/CustomStatusStyle`
`CometChatMessageReceipt`	`cometchatMessageReceiptStyle`	`@style/CustomReceiptStyle`

4. Programmatic styling

Every component exposes setter methods for colors, text appearances, and drawables:

Java:

CometChatConversations conversations = findViewById(R.id.conversations);
conversations.setBackgroundColor(Color.WHITE);
conversations.setTitleTextColor(Color.BLACK);
conversations.setTitleTextAppearance(R.style.MyTitleStyle);
conversations.setSeparatorColor(Color.LTGRAY);
conversations.setAvatarStyle(R.style.MyAvatarStyle);
conversations.setStatusIndicatorStyle(R.style.MyStatusStyle);

5. Dark mode

CometChat respects Android's DayNight theme. Define separate values in values-night/themes.xml:

<!-- values/themes.xml (light) -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#6C63FF</item>
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatTextColorPrimary">#141414</item>
</style>

<!-- values-night/themes.xml (dark) -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#7B73FF</item>
    <item name="cometchatBackgroundColor1">#1A1A2E</item>
    <item name="cometchatTextColorPrimary">#E0E0E0</item>
</style>

The CometChatTheme class auto-detects the current night mode and adjusts extended color shades accordingly.

Hard rules

Set primary color BEFORE inflating components. CometChatTheme.setPrimaryColor() must be called before setContentView() or component inflation.
Use XML theme attributes for global overrides. Per-component setters are for fine-tuning.
Extended primary shades are auto-generated. Only override them if you need exact brand colors at each shade level.
Dark mode uses values-night/. Follow Android's standard DayNight theme pattern.