cometchat-android-v5-theming

Imported from cometchat/cometchat-skills (skills/cometchat-android-v5-theming/SKILL.md). Install upstream with npx skills add cometchat/cometchat-skills --skill cometchat-android-v5-theming. Copyright stays with the author (MIT).

Ground truth: com.cometchat:chat-uikit-android:5.x (legacy/maintenance-only; +calls-sdk-android:5.x) — resolved AAR (javap) + ui-kit/android. Official docs: https://www.cometchat.com/docs/ui-kit/android/overview · Docs MCP: claude mcp add --transport http cometchat-docs https://www.cometchat.com/docs/mcp (or fetch the URL directly without MCP). Verify symbols against the installed package/source before relying on them.

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.