Color Resources

Complete reference of all color CSS variables with light and dark theme values.

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.