Color Resources - CometChat Docs

AI Integration Quick Reference

Field	Value
Override scope	`.cometchat` (global) or `.cometchat-{component}` (per-component)
Key token	`--cometchat-primary-color` — brand/accent color
Light theme	Defined in `:root, [data-theme='light']`
Dark theme	Defined in `[data-theme='dark']`
Import	`import "@cometchat/chat-uikit-react/styles";`

Overview

All colors in the UI Kit are defined as CSS custom properties. Override them to match your brand. Variables cascade — set on .cometchat to affect everything, or on a specific component class to scope the change.

src/cometchat-overrides.css

.cometchat {
  --cometchat-primary-color: #e91e63;
}

Primary Colors

The primary color and its extended scale (50 = lightest, 900 = darkest).

Token	Light	Dark
`--cometchat-primary-color`	`#6852d6`	`#6852d6`
`--cometchat-extended-primary-color-50`	`#f5f2ff`	`#15102b`
`--cometchat-extended-primary-color-100`	`#ebe5ff`	`#1d173c`
`--cometchat-extended-primary-color-200`	`#d6ccff`	`#251e4d`
`--cometchat-extended-primary-color-300`	`#c2b2ff`	`#2e245e`
`--cometchat-extended-primary-color-400`	`#ad99ff`	`#362b6f`
`--cometchat-extended-primary-color-500`	`#997fff`	`#3e3180`
`--cometchat-extended-primary-color-600`	`#8566ff`	`#473892`
`--cometchat-extended-primary-color-700`	`#704cff`	`#4f3ea3`
`--cometchat-extended-primary-color-800`	`#5c33ff`	`#5745b4`
`--cometchat-extended-primary-color-900`	`#4719ff`	`#7460d9`

Neutral Colors

Gray scale used for backgrounds, borders, and text.

Token	Light	Dark
`--cometchat-neutral-color-50`	`#ffffff`	`#141414`
`--cometchat-neutral-color-100`	`#fafafa`	`#1a1a1a`
`--cometchat-neutral-color-200`	`#f5f5f5`	`#272727`
`--cometchat-neutral-color-300`	`#e8e8e8`	`#383838`
`--cometchat-neutral-color-400`	`#c4c4c4`	`#4c4c4c`
`--cometchat-neutral-color-500`	`#a1a1a1`	`#858585`
`--cometchat-neutral-color-600`	`#727272`	`#989898`
`--cometchat-neutral-color-700`	`#565656`	`#a8a8a8`
`--cometchat-neutral-color-800`	`#333333`	`#c8c8c8`
`--cometchat-neutral-color-900`	`#141414`	`#ffffff`

Alert Colors

Token	Light	Dark	Purpose
`--cometchat-info-color`	`#0f73d6`	`#0d66bf`	Informational
`--cometchat-warning-color`	`#ffab00`	`#d08d04`	Warning / mentions
`--cometchat-success-color`	`#09b26b`	`#0b9f5d`	Success
`--cometchat-error-color`	`#f44649`	`#c73c3e`	Error / danger
`--cometchat-message-seen-color`	`#56e8a7`	`#56e8a7`	Read receipts

Semantic Colors

These reference the neutral/primary scales and change automatically with the theme.

Backgrounds

Token	Maps to
`--cometchat-background-color-01`	`neutral-color-50` (base)
`--cometchat-background-color-02`	`neutral-color-100` (surface)
`--cometchat-background-color-03`	`neutral-color-200` (elevated)
`--cometchat-background-color-04`	`neutral-color-300` (highest)

Borders

Token	Maps to
`--cometchat-border-color-light`	`neutral-color-200`
`--cometchat-border-color-default`	`neutral-color-300`
`--cometchat-border-color-dark`	`neutral-color-400`
`--cometchat-border-color-highlight`	`primary-color`

Text

Token	Maps to
`--cometchat-text-color-primary`	`neutral-color-900`
`--cometchat-text-color-secondary`	`neutral-color-600`
`--cometchat-text-color-tertiary`	`neutral-color-500`
`--cometchat-text-color-disabled`	`neutral-color-400`
`--cometchat-text-color-white`	`neutral-color-50`
`--cometchat-text-color-highlight`	`primary-color`

Icons

Token	Maps to
`--cometchat-icon-color-primary`	`neutral-color-900`
`--cometchat-icon-color-secondary`	`neutral-color-500`
`--cometchat-icon-color-tertiary`	`neutral-color-400`
`--cometchat-icon-color-white`	`neutral-color-50`
`--cometchat-icon-color-highlight`	`primary-color`

Buttons

Token	Light	Dark
`--cometchat-primary-button-background`	`primary-color`	`primary-color`
`--cometchat-primary-button-text`	`static-white`	`static-white`
`--cometchat-primary-button-icon`	`static-white`	`static-white`
`--cometchat-secondary-button-background`	`neutral-color-900`	`neutral-color-900`
`--cometchat-secondary-button-text`	`neutral-color-900`	`neutral-color-900`
`--cometchat-fab-button-background`	`primary-color`	`primary-color`
`--cometchat-link-button`	`info-color`	`info-color`

Example: Brand Color Override

src/cometchat-overrides.css

/* Change the primary brand color globally — target .cometchat (the root wrapper) */
.cometchat {
  --cometchat-primary-color: #e91e63;
  --cometchat-extended-primary-color-500: #e91e63;
  --cometchat-extended-primary-color-600: #d81b60;
  --cometchat-extended-primary-color-700: #c2185b;
}

Example: Dark Mode Override

[data-theme="dark"] {
  --cometchat-primary-color: #bb86fc;
  --cometchat-background-color-01: #121212;
  --cometchat-background-color-02: #1e1e1e;
}

Always target .cometchat or [data-theme="..."] for global overrides. For per-component overrides, use the component’s BEM class name directly (e.g., .cometchat-conversations). See Theming for details.

​Overview

​Primary Colors

​Neutral Colors

​Alert Colors

​Semantic Colors

​Backgrounds

​Borders

​Text

​Icons

​Buttons

​Example: Brand Color Override

​Example: Dark Mode Override

Overview

Primary Colors

Neutral Colors

Alert Colors

Semantic Colors

Backgrounds

Borders

Text

Icons

Buttons

Example: Brand Color Override

Example: Dark Mode Override