Color Resources

Review and override the default UI Kit color palette for consistent light and dark mode styling.

AI Integration Quick Reference

Field	Value
Kotlin XML Views	Colors defined in res/values/color.xml (light) and res/values-night/color.xml (dark), overridable via theme attributes or CometChatTheme.set*()
Jetpack Compose	Colors provided via lightColorScheme() and darkColorScheme() factory functions, customizable via .copy()
Key tokens	primary, backgroundColor1–4, textColorPrimary/Secondary/Tertiary, strokeColorDefault/Light/Dark, successColor, errorColor, warningColor, infoColor
Related	Theme Introduction · Component Styling

The UI Kit ships with a complete color palette for light and dark modes. This page documents the default values and how to override them.

---

Color Categories

The palette is organized into these groups:

Category	Tokens	Purpose
Primary	primary	Brand color for buttons, highlights, interactive elements
Neutral	neutral50 – neutral900	Grayscale ramp for backgrounds, text, borders
Alert	success, error, warning, info, messageRead	Status indicators
Background	backgroundColor1 – backgroundColor4	Surface/panel backgrounds (derived from neutrals)
Stroke	strokeColorDefault, strokeColorLight, strokeColorDark, strokeColorHighlight	Borders and dividers
Text	textColorPrimary, textColorSecondary, textColorTertiary, textColorDisabled, textColorWhite, textColorHighlight	Typography colors
Icon	iconTintPrimary, iconTintSecondary, iconTintTertiary, iconTintWhite, iconTintHighlight	Icon tints
Button	primaryButtonBackground, primaryButtonText, secondaryButtonBackground, secondaryButtonText	Button colors

---

Default Light Mode Palette

Kotlin (XML Views)

Defined in chatuikit-kotlin/src/main/res/values/color.xml:

color.xml

<!-- Primary -->
<color name="cometchat_color_primary">#6852D6</color>

<!-- Neutral -->
<color name="cometchat_color_neutral_50">#FFFFFF</color>
<color name="cometchat_color_neutral_100">#FAFAFA</color>
<color name="cometchat_color_neutral_200">#F5F5F5</color>
<color name="cometchat_color_neutral_300">#E8E8E8</color>
<color name="cometchat_color_neutral_400">#DCDCDC</color>
<color name="cometchat_color_neutral_500">#A1A1A1</color>
<color name="cometchat_color_neutral_600">#727272</color>
<color name="cometchat_color_neutral_700">#5B5B5B</color>
<color name="cometchat_color_neutral_800">#434343</color>
<color name="cometchat_color_neutral_900">#141414</color>

<!-- Alert -->
<color name="cometchat_color_info">#0B7BEA</color>
<color name="cometchat_color_success">#09C26F</color>
<color name="cometchat_color_warning">#FFAB00</color>
<color name="cometchat_color_error">#F44649</color>
<color name="cometchat_color_message_read">#56E8A7</color>

Jetpack Compose

Provided by lightColorScheme() in CometChatColorScheme.kt:

import com.cometchat.uikit.compose.theme.lightColorScheme

// Default light color scheme
val colors = lightColorScheme()

// Key defaults:
// primary = Color(0xFF6852D6)
// neutralColor50 = Color(0xFFFFFFFF)
// neutralColor900 = Color(0xFF141414)
// successColor = Color(0xFF09C26F)
// errorColor = Color(0xFFF44649)
// warningColor = Color(0xFFFFAB00)
// infoColor = Color(0xFF0B7BEA)

---

Default Dark Mode Palette

Kotlin (XML Views)

Defined in chatuikit-kotlin/src/main/res/values-night/color.xml. Note how neutral values are inverted:

values-night/color.xml

<!-- Primary -->
<color name="cometchat_color_primary">#6852D6</color>

<!-- Neutral (inverted for dark mode) -->
<color name="cometchat_color_neutral_50">#141414</color>
<color name="cometchat_color_neutral_100">#1A1A1A</color>
<color name="cometchat_color_neutral_200">#272727</color>
<color name="cometchat_color_neutral_300">#383838</color>
<color name="cometchat_color_neutral_400">#4C4C4C</color>
<color name="cometchat_color_neutral_500">#858585</color>
<color name="cometchat_color_neutral_600">#989898</color>
<color name="cometchat_color_neutral_700">#A8A8A8</color>
<color name="cometchat_color_neutral_800">#C8C8C8</color>
<color name="cometchat_color_neutral_900">#FFFFFF</color>

<!-- Alert -->
<color name="cometchat_color_info">#0D66BF</color>
<color name="cometchat_color_success">#0B9F5D</color>
<color name="cometchat_color_warning">#D08D04</color>
<color name="cometchat_color_error">#C73C3E</color>
<color name="cometchat_color_message_read">#56E8A7</color>

Android automatically uses values-night resources when the system is in dark mode.

Jetpack Compose

Provided by darkColorScheme():

import com.cometchat.uikit.compose.theme.darkColorScheme

// Default dark color scheme
val colors = darkColorScheme()

// Key defaults (neutrals inverted):
// primary = Color(0xFF6852D6)
// neutralColor50 = Color(0xFF141414)
// neutralColor900 = Color(0xFFFFFFFF)
// successColor = Color(0xFF0B9F5D)
// errorColor = Color(0xFFC73C3E)

---

Override Colors

Kotlin (XML Views)

Override via XML theme attributes in themes.xml:

themes.xml

<style name="AppTheme" parent="CometChatTheme.DayNight">
    <item name="cometchatPrimaryColor">#F76808</item>
    <item name="cometchatBackgroundColor1">#FFFFFF</item>
    <item name="cometchatTextColorPrimary">#000000</item>
    <item name="cometchatStrokeColorDefault">#E0E0E0</item>
</style>

Or programmatically via CometChatTheme:

CometChatTheme.setPrimaryColor(Color.parseColor("#F76808"))
CometChatTheme.setBackgroundColor1(Color.parseColor("#FFFFFF"))
CometChatTheme.setTextColorPrimary(Color.parseColor("#000000"))
CometChatTheme.setStrokeColorDefault(Color.parseColor("#E0E0E0"))

Jetpack Compose

Customize via .copy() on the factory functions:

val customColors = lightColorScheme().copy(
    primary = Color(0xFFF76808),
    backgroundColor1 = Color(0xFFFFFFFF),
    textColorPrimary = Color(0xFF000000),
    strokeColorDefault = Color(0xFFE0E0E0)
)

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

---

Derived Colors

Background, stroke, text, and icon colors are derived from the neutral scale by default:

Token	Light Mode Default	Dark Mode Default
backgroundColor1	neutral50 (#FFFFFF)	neutral50 (#141414)
backgroundColor2	neutral100 (#FAFAFA)	neutral100 (#1A1A1A)
textColorPrimary	neutral900 (#141414)	neutral900 (#FFFFFF)
textColorSecondary	neutral600 (#727272)	neutral600 (#989898)
strokeColorDefault	neutral200 (#F5F5F5)	neutral200 (#272727)
strokeColorLight	neutral300 (#E8E8E8)	neutral300 (#383838)
iconTintPrimary	neutral900 (#141414)	neutral900 (#FFFFFF)
iconTintHighlight	primary (#6852D6)	primary (#6852D6)

This means overriding a neutral color automatically updates all tokens that reference it.