The UI Kit supports two approaches to styling: XML theme attributes for declarative, app-wide theming, and programmatic setters for runtime customization.
Programmatic setters take precedence over XML theme attributes when both are applied to the same property.
XML Theme Hierarchy
The theming system follows a three-level hierarchy:
- Your
AppTheme extends CometChatTheme.DayNight (theme-level colors and fonts)
- Component styles extend parent styles (e.g.,
cometchatConversationsStyle)
- Sub-component styles are nested within component styles (e.g., avatar style within conversations)
<!-- Level 1: Theme-level colors -->
<style name="AppTheme" parent="CometChatTheme.DayNight">
<item name="cometchatPrimaryColor">#6851D6</item>
<item name="cometchatErrorColor">#FF3B30</item>
<item name="cometchatBackgroundColor1">#FFFFFF</item>
<item name="cometchatFontRegular">@font/my_regular_font</item>
<item name="cometchatFontMedium">@font/my_medium_font</item>
<item name="cometchatFontBold">@font/my_bold_font</item>
<!-- Level 2: Component-level style -->
<item name="cometchatConversationsStyle">@style/CustomConversationsStyle</item>
</style>
<!-- Level 2: Component style -->
<style name="CustomConversationsStyle" parent="CometChatConversationsStyle">
<item name="cometchatBackgroundColor">#F5F5F5</item>
<item name="cometchatSeparatorColor">#E0E0E0</item>
<!-- Level 3: Sub-component style -->
<item name="cometchatAvatarStyle">@style/CustomAvatarStyle</item>
</style>
<!-- Level 3: Sub-component style -->
<style name="CustomAvatarStyle" parent="CometChatAvatarStyle">
<item name="cometchatCornerRadius">12dp</item>
<item name="cometchatBackgroundColor">#E8E0FF</item>
</style>
Font Customization
Override fonts at the theme level using these attributes:
| Attribute | Usage |
|---|
cometchatFontBold | Headings, titles, and emphasized text |
cometchatFontMedium | Subtitles and secondary headings |
cometchatFontRegular | Body text, descriptions, and input fields |
Programmatic Styling with CometChatTheme
The CometChatTheme class provides static setter/getter methods for runtime color and typography token overrides:
Color Tokens
| Method | Description |
|---|
setPrimaryColor(int) | Primary brand color used for buttons, links, and highlights |
setErrorColor(int) | Error state color |
setSuccessColor(int) | Success state color |
setWarningColor(int) | Warning state color |
setInfoColor(int) | Informational state color |
setBackgroundColor1(int) – setBackgroundColor4(int) | Background color levels |
setTextColorPrimary(int) | Primary text color |
setTextColorSecondary(int) | Secondary text color |
setTextColorTertiary(int) | Tertiary text color |
setTextColorDisabled(int) | Disabled text color |
setTextColorWhite(int) | White text color |
setTextColorHighlight(int) | Highlighted text color |
Icon Tints
| Method | Description |
|---|
setIconTintPrimary(int) | Primary icon tint |
setIconTintSecondary(int) | Secondary icon tint |
setIconTintTertiary(int) | Tertiary icon tint |
setIconTintWhite(int) | White icon tint |
setIconTintHighlight(int) | Highlighted icon tint |
| Method | Description |
|---|
setPrimaryButtonBackgroundColor(int) | Primary button background |
setPrimaryButtonTextColor(int) | Primary button text |
setSecondaryButtonBackgroundColor(int) | Secondary button background |
setSecondaryButtonTextColor(int) | Secondary button text |
// Override theme colors at runtime
CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"))
CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"))
CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"))
CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"))
// Override theme colors at runtime
CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"));
CometChatTheme.setErrorColor(Color.parseColor("#FF3B30"));
CometChatTheme.setTextColorPrimary(Color.parseColor("#1A1A1A"));
CometChatTheme.setTextColorSecondary(Color.parseColor("#808080"));
Component Style Setters
Each component exposes setter methods for its own style and sub-component styles. Using CometChatConversations as an example:
| Method | Applies To |
|---|
setStyle(@StyleRes int) | The component’s own style |
setAvatarStyle(@StyleRes int) | Avatar sub-component |
setBadgeStyle(@StyleRes int) | Unread badge sub-component |
setReceiptStyle(@StyleRes int) | Message receipt icons |
setTypingIndicatorStyle(@StyleRes int) | Typing indicator |
setMentionsStyle(@StyleRes int) | Mentions formatting |
setStatusIndicatorStyle(@StyleRes int) | Online/offline status indicator |
setDateStyle(@StyleRes int) | Date/time label |
val conversations = CometChatConversations(context)
conversations.setStyle(R.style.CustomConversationsStyle)
conversations.setAvatarStyle(R.style.CustomAvatarStyle)
conversations.setBadgeStyle(R.style.CustomBadgeStyle)
CometChatConversations conversations = new CometChatConversations(context);
conversations.setStyle(R.style.CustomConversationsStyle);
conversations.setAvatarStyle(R.style.CustomAvatarStyle);
conversations.setBadgeStyle(R.style.CustomBadgeStyle);
