Skip to main content
FieldValue
GoalOverride UI Kit color tokens to match a brand
WhereApp.css (global) — import in app entry via import "./App.css";
ScopeOverride variables on .cometchat (global) or .cometchat-<component> (component-specific)
Key tokens--cometchat-primary-color (brand/accent), --cometchat-neutral-color-300 (incoming bubbles, default #E8E8E8), --cometchat-background-color-01 (main background)
Dark modeSource uses [data-theme="dark"] on :root. App-controlled: .cometchat-root[data-theme="dark"] .cometchat
Source filecss-variables.css on GitHub
ConstraintsGlobal CSS only (no CSS Modules), no !important, component-level overrides take precedence over global
The Chat UI Kit features a color palette designed for a consistent and visually appealing user experience. It follows the Block, Element, Modifier (BEM) methodology, ensuring scalable styling and easy customization by overriding the Kit’s CSS variables.
Agent Guardrails
  • Use the snippets exactly as shown; only change token values.
  • Keep .cometchat and .cometchat-conversations intact — these are the tested selectors.
  • Keep overrides in global CSS (App.css), not CSS Modules.
  • Dark mode examples assume data-theme is set on the wrapper element. If data-theme is set elsewhere, update the selector to match.
Prerequisites:
  1. Import the base stylesheet: @import url("@cometchat/chat-uikit-react/css-variables.css"); in App.css
  2. Import the CSS file at the app entry: import "./App.css"; in App.tsx
  3. All overrides must target .cometchat or a .cometchat-<component> class
  4. Use global CSS (not CSS Modules with hashed class names) — hashed selectors won’t match

​
Selector Contract

Canonical selector patterns for overriding colors. Global override 
.cometchat { --token: value; }
Component override 
.cometchat .cometchat-conversations { --token: value; }
Dark mode override (app-controlled) 
.cometchat-root[data-theme="dark"] .cometchat { --token: value; }
The source stylesheet defines dark mode defaults on [data-theme="dark"] at the :root level. When controlling dark mode from the app, place data-theme on the wrapper and scope overrides accordingly.

​
CSS Variable Reference

This table maps every commonly used token to what it visually controls.
VariableWhat It ControlsDefault (Light)Used By
--cometchat-primary-colorBrand accent, outgoing bubble bg, active states, links, buttons#6852D6Outgoing bubbles, send button, active tabs, links
--cometchat-neutral-color-300Incoming bubble background, borders#E8E8E8Incoming message bubbles, border-color-default
--cometchat-neutral-color-400Secondary backgrounds, dividers#DCDCDCBorders, secondary panels
--cometchat-neutral-color-500Muted text, placeholders#A1A1A1Placeholder text, disabled states
--cometchat-neutral-color-600Secondary text#727272Timestamps, subtitles
--cometchat-neutral-color-700Primary text#5B5B5BMain body text
--cometchat-neutral-color-800Headings, strong text#434343Component titles, names
--cometchat-neutral-color-900Strongest text#141414Text color primary
--cometchat-neutral-color-50White surface#FFFFFFBackground color 01, text-color-white
--cometchat-background-color-01Main app backgroundvar(--cometchat-neutral-color-50)Root container background
--cometchat-background-color-02Secondary/panel backgroundvar(--cometchat-neutral-color-100)Sidebars, panels
--cometchat-background-color-03Tertiary backgroundvar(--cometchat-neutral-color-200)Nested panels, cards
--cometchat-background-color-04Quaternary backgroundvar(--cometchat-neutral-color-300)Additional surface layer
--cometchat-extended-primary-color-50 through 900Primary color scale (lightest to darkest)See palette belowHover states, gradients, shades
--cometchat-font-familyAll text in UI Kit'Roboto', 'Inter'Global typography
--cometchat-text-color-highlightHighlighted/linked textvar(--cometchat-primary-color)Links, mentions, highlights
--cometchat-icon-color-highlightHighlighted icon colorvar(--cometchat-primary-color)Active icons, selected states
--cometchat-text-color-secondarySecondary/caption textvar(--cometchat-neutral-color-600)Timestamps, subtitles, captions
--cometchat-icon-color-secondarySecondary icon colorvar(--cometchat-neutral-color-500)Inactive icons
--cometchat-border-color-defaultDefault border colorvar(--cometchat-neutral-color-300)Dividers, input borders
--cometchat-info-colorInformational states#0B7BEAInfo callouts
--cometchat-warning-colorWarning states#FFAB00Warning callouts
--cometchat-success-colorSuccess states#09C26FOnline indicators, success messages
--cometchat-error-colorError states#F44649Error messages, validation
--cometchat-message-seen-colorSeen/read indicator color(dark mode only: #56E8A7)Read receipts
--cometchat-primary-button-backgroundPrimary button fillvar(--cometchat-primary-color)Send button, action buttons
--cometchat-primary-button-textPrimary button text#FFFFFF (static white)Button labels
--cometchat-primary-button-iconPrimary button icon#FFFFFF (static white)Button icons
--cometchat-secondary-button-backgroundSecondary button fillvar(--cometchat-neutral-color-900)Secondary action buttons
--cometchat-secondary-button-textSecondary button textvar(--cometchat-neutral-color-900)Secondary button labels
--cometchat-secondary-button-iconSecondary button iconvar(--cometchat-neutral-color-900)Secondary button icons
--cometchat-link-buttonLink button colorvar(--cometchat-info-color)Inline link buttons
--cometchat-fab-button-backgroundFAB button fillvar(--cometchat-primary-color)Floating action button
--cometchat-fab-button-iconFAB button icon#FFFFFF (static white)FAB icon
--cometchat-white-hoverHover state on white surfacesvar(--cometchat-neutral-color-100)List item hover
--cometchat-white-pressedPressed state on white surfacesvar(--cometchat-neutral-color-300)List item press
CSS Specificity & Precedence Rules:
  1. Component-level overrides (.cometchat .cometchat-conversations { --var: val }) take precedence over global overrides (.cometchat { --var: val })
  2. Dark mode overrides ([data-theme="dark"]) take precedence over light mode defaults
  3. CSS variable overrides only affect properties the UI Kit theme binds to that variable — they do NOT change layout or spacing
  4. Always keep the .cometchat prefix to avoid leaking styles into the host app
  5. !important should never be needed — if it is, the selector specificity is wrong

​
Color Palette

The primary color defines key actions, branding, and UI elements, while the extended primary palette provides variations for supporting components.

​
Primary Color

​
Light Mode

--cometchat-primary-color: #6852D6;
--cometchat-extended-primary-color-50: #F9F8FD;
--cometchat-extended-primary-color-100: #EDEAFA;
--cometchat-extended-primary-color-200: #DCD7F6;
--cometchat-extended-primary-color-300: #CCC4F1;
--cometchat-extended-primary-color-400: #BBB1ED;
--cometchat-extended-primary-color-500: #AA9EE8;
--cometchat-extended-primary-color-600: #9A8BE4;
--cometchat-extended-primary-color-700: #8978DF;
--cometchat-extended-primary-color-800: #7965DB;
--cometchat-extended-primary-color-900: #5D49BE;

​
Dark Mode

--cometchat-primary-color: #6852D6;
--cometchat-extended-primary-color-50: #15102B;
--cometchat-extended-primary-color-100: #1D173C;
--cometchat-extended-primary-color-200: #251E4D;
--cometchat-extended-primary-color-300: #2E245E;
--cometchat-extended-primary-color-400: #362B6F;
--cometchat-extended-primary-color-500: #3E3180;
--cometchat-extended-primary-color-600: #473892;
--cometchat-extended-primary-color-700: #4F3EA3;
--cometchat-extended-primary-color-800: #5745B4;
--cometchat-extended-primary-color-900: #7460D9;

​
Extended Primary Colors

​
Light Mode

​
Dark Mode

​
Complete End-to-End Example: Custom Brand Colors

Step 1: Add to App.css: 
@import url("@cometchat/chat-uikit-react/css-variables.css");

/* Light mode brand override */
.cometchat {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-500: #fbaa75;
  --cometchat-extended-primary-color-900: #c45206;
  --cometchat-text-color-highlight: #f76808;
  --cometchat-icon-color-highlight: #f76808;
}

/* Dark mode brand override */
.cometchat-root[data-theme="dark"] .cometchat {
  --cometchat-primary-color: #f76808;
  --cometchat-extended-primary-color-500: #7a3404;
  --cometchat-extended-primary-color-900: #fbaa75;
}
Step 2: Ensure App.tsx imports the CSS: 
import "./App.css";
// ... render CometChat UI Kit components
Expected result: All primary-colored elements (outgoing bubbles, buttons, active states, links) change from purple (#6852D6) to orange (#f76808) in both light and dark modes.

​
Common Failure Modes

SymptomCauseFix
CSS has no effectCSS file not imported in app entryAdd import "./App.css"; in App.tsx
CSS has no effectBase stylesheet not importedAdd @import url("@cometchat/chat-uikit-react/css-variables.css"); at top of App.css
Selectors don’t matchUsing CSS Modules (hashed class names)Move rules to a global stylesheet, not *.module.css
Only some elements changed colorOnly overrode --cometchat-primary-color but not extended paletteOverride the extended-primary-color scale too for full consistency
Dark mode unchangedOnly overrode light mode tokensAdd overrides in .cometchat-root[data-theme="dark"] .cometchat selector too
Component-level override not workingSelector specificity too lowUse .cometchat .cometchat-<component> for higher specificity
Styles leak into host appMissing .cometchat scope prefixAlways scope overrides under .cometchat
Token change has no visible effectToken doesn’t control the expected propertyCheck the CSS Variable Reference table above