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:

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.

---

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.