Styles - CometChat Docs

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

Button Colors

Method	Description
`setPrimaryButtonBackgroundColor(int)`	Primary button background
`setPrimaryButtonTextColor(int)`	Primary button text
`setSecondaryButtonBackgroundColor(int)`	Secondary button background
`setSecondaryButtonTextColor(int)`	Secondary button text

Kotlin
Java

// 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

Kotlin
Java

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);

Theming Introduction — Full theming reference for the UI Kit.
Component Styling — Detailed per-component style attribute reference.
Customization Overview — See all customization categories.

​XML Theme Hierarchy

​Font Customization

​Programmatic Styling with CometChatTheme

​Color Tokens

​Icon Tints

​Button Colors

​Component Style Setters

​Related

XML Theme Hierarchy

Font Customization

Programmatic Styling with CometChatTheme

Color Tokens

Icon Tints

Button Colors

Component Style Setters

Related