| name | cometchat-android-v5-theming |
| description | Customize CometChat UI to match your app's design system. Covers CometChatTheme, XML attributes, style classes, dark mode, and color system. |
| license | MIT |
| compatibility | Android 7.0+; Java 8+; Kotlin 1.8+; com.cometchat:chat-uikit-android:5.x |
| metadata | {"author":"CometChat","version":"3.0.0","tags":"cometchat android theming customization branding dark-mode colors styles"} |
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:
| 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">
<item name="cometchatPrimaryColor">#6C63FF</item>
<item name="cometchatBackgroundColor1">#FFFFFF</item>
<item name="cometchatBackgroundColor2">#F5F5F5</item>
<item name="cometchatTextColorPrimary">#141414</item>
<item name="cometchatTextColorSecondary">#727272</item>
<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:
<style name="AppTheme" parent="CometChatTheme.DayNight">
<item name="cometchatPrimaryColor">#6C63FF</item>
<item name="cometchatBackgroundColor1">#FFFFFF</item>
<item name="cometchatTextColorPrimary">#141414</item>
</style>
<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.
