Introduction - CometChat Docs

AI Integration Quick Reference

Field	Value
Kotlin XML Views	Override XML theme attributes in `themes.xml` extending `CometChatTheme.DayNight`, or use `CometChatTheme.setPrimaryColor()` programmatically
Jetpack Compose	Wrap content in `CometChatTheme {}` composable, customize via `CometChatColorScheme`, `CometChatTypography`, and `Shapes`
Key color tokens	`primary`, `backgroundColor1`, `backgroundColor2`, `textColorPrimary`, `textColorSecondary`, `strokeColorDefault`
Dark mode	Kotlin: `values-night/themes.xml` overrides. Compose: provide a different `CometChatColorScheme` based on `isSystemInDarkTheme()`

Create and apply a global CometChat UI Kit theme that matches your brand across light and dark modes.

When to use this

You want a single UI Kit theme that matches your app branding.
You need light and dark mode support with consistent colors.
You want to customize primary, background, or text colors across all UI Kit components.

Prerequisites

CometChat UI Kit is installed and initialized.
You’ve completed the Kotlin Integration or Jetpack Compose Integration.

Core Concepts

Kotlin (XML Views)
Jetpack Compose

The Kotlin XML UI Kit uses Android’s theme attribute system. All components read colors, typography, and fonts from XML theme attributes prefixed with cometchat.

CometChatTheme.DayNight — base theme built on Theme.MaterialComponents.DayNight.NoActionBar
Theme attributes like cometchatPrimaryColor, cometchatBackgroundColor1, etc. are defined in your themes.xml
Programmatic access via CometChatTheme.getPrimaryColor(context) and CometChatTheme.setPrimaryColor(color)
Dark mode via values-night/themes.xml overrides

Precedence:

Programmatic overrides via CometChatTheme.set*() (highest)
Activity-level theme
Application-level theme
CometChatTheme.DayNight defaults (lowest)

The Compose UI Kit uses a CometChatTheme composable that provides colors, typography, and shapes via CompositionLocalProvider.

CometChatTheme {} — wraps your content and provides theme values
CometChatTheme.colorScheme — access colors like CometChatTheme.colorScheme.primary
CometChatTheme.typography — access text styles like CometChatTheme.typography.titleMedium
CometChatTheme.shapes — access shape definitions
Dark mode by providing a different CometChatColorScheme based on system theme

Quick Start

Kotlin (XML Views)
Jetpack Compose

Create your theme

In app/src/main/res/values/themes.xml, extend CometChatTheme.DayNight:

themes.xml

<resources>
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <!-- Your customizations go here -->
    </style>
</resources>

Apply the theme

In AndroidManifest.xml, set the theme on your application:

AndroidManifest.xml

<application
    android:theme="@style/AppTheme"
    ...>
</application>

Build and verify

Run the app and confirm UI Kit screens use your theme in both light and dark mode.

Wrap your content

Wrap your composable content with CometChatTheme:

import com.cometchat.uikit.compose.theme.CometChatTheme

CometChatTheme {
    // Your CometChat UI Kit composables here
    CometChatConversations(...)
}

Build and verify

Run the app and confirm UI Kit screens render with the default CometChat theme.

Change the Primary Color

Kotlin (XML Views)
Jetpack Compose

Override cometchatPrimaryColor in your theme:

themes.xml

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#F76808</item>
</style>

Or set it programmatically:

CometChatTheme.setPrimaryColor(Color.parseColor("#F76808"))

Provide a custom CometChatColorScheme:

val customColors = CometChatColorScheme.light().copy(
    primary = Color(0xFFF76808)
)

CometChatTheme(colorScheme = customColors) {
    // Your content
}

Customize Common Theme Attributes

Kotlin (XML Views)
Jetpack Compose

themes.xml

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <!-- Primary brand color -->
    <item name="cometchatPrimaryColor">#6851D6</item>

    <!-- Background colors -->
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatBackgroundColor2">#F5F5F5</item>

    <!-- Text colors -->
    <item name="cometchatTextColorPrimary">#000000</item>
    <item name="cometchatTextColorSecondary">#666666</item>

    <!-- Border and divider colors -->
    <item name="cometchatStrokeColorDefault">#E0E0E0</item>
</style>

Or programmatically:

CometChatTheme.setPrimaryColor(Color.parseColor("#6851D6"))
CometChatTheme.setBackgroundColor1(Color.parseColor("#FFFFFF"))
CometChatTheme.setBackgroundColor2(Color.parseColor("#F5F5F5"))
CometChatTheme.setTextColorPrimary(Color.parseColor("#000000"))
CometChatTheme.setTextColorSecondary(Color.parseColor("#666666"))
CometChatTheme.setStrokeColorDefault(Color.parseColor("#E0E0E0"))

val customColors = CometChatColorScheme.light().copy(
    primary = Color(0xFF6851D6),
    backgroundColor1 = Color(0xFFFFFFFF),
    backgroundColor2 = Color(0xFFF5F5F5),
    textColorPrimary = Color(0xFF000000),
    textColorSecondary = Color(0xFF666666),
    strokeColorDefault = Color(0xFFE0E0E0)
)

CometChatTheme(colorScheme = customColors) {
    // Your content
}

Add Dark Mode Support

Kotlin (XML Views)
Jetpack Compose

Create app/src/main/res/values-night/themes.xml and override attributes for dark mode:

values-night/themes.xml

<resources>
    <style name="AppTheme" parent="CometChatTheme.DayNight">
        <item name="cometchatPrimaryColor">#8B7FFF</item>
        <item name="cometchatBackgroundColor1">#1A1A1A</item>
        <item name="cometchatTextColorPrimary">#FFFFFF</item>
    </style>
</resources>

Android automatically applies values-night overrides when the system uses dark mode.

Provide different color schemes based on system theme:

val isDark = isSystemInDarkTheme()

val colorScheme = if (isDark) {
    CometChatColorScheme.dark().copy(
        primary = Color(0xFF8B7FFF),
        backgroundColor1 = Color(0xFF1A1A1A),
        textColorPrimary = Color(0xFFFFFFFF)
    )
} else {
    CometChatColorScheme.light().copy(
        primary = Color(0xFF6851D6)
    )
}

CometChatTheme(colorScheme = colorScheme) {
    // Your content
}

Apply a Theme to a Specific Activity

Kotlin (XML Views)
Jetpack Compose

Set android:theme on a specific <activity> in AndroidManifest.xml:

AndroidManifest.xml

<application android:theme="@style/AppTheme" ...>
    <activity
        android:name=".ChatActivity"
        android:theme="@style/ChatTheme" />
</application>

Activity-level themes override the application-level theme.

Wrap a specific screen with a different CometChatTheme:

// Default theme for most screens
CometChatTheme {
    MainScreen()
}

// Custom theme for a specific screen
CometChatTheme(colorScheme = chatScreenColors) {
    MessageScreen(user = user, onBack = { })
}

Color Token Reference

Token	Description
`primary`	Buttons, highlights, interactive elements
`backgroundColor1`	Main surface/panel background
`backgroundColor2`	Secondary surface background
`backgroundColor3`	Tertiary surface background
`backgroundColor4`	Quaternary surface background
`textColorPrimary`	Primary text
`textColorSecondary`	Secondary/subtitle text
`textColorTertiary`	Tertiary/hint text
`textColorHighlight`	Highlighted/linked text
`strokeColorDefault`	Default borders and dividers
`strokeColorLight`	Light borders
`strokeColorDark`	Dark borders
`successColor`	Success indicators
`errorColor`	Error indicators
`warningColor`	Warning indicators
`infoColor`	Info indicators

​When to use this

​Prerequisites

​Core Concepts

​Quick Start

​Change the Primary Color

​Customize Common Theme Attributes

​Add Dark Mode Support

​Apply a Theme to a Specific Activity

​Color Token Reference

When to use this

Prerequisites

Core Concepts

Quick Start

Change the Primary Color

Customize Common Theme Attributes

Add Dark Mode Support

Apply a Theme to a Specific Activity

Color Token Reference