> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Color Resources

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

<Accordion title="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']` |
</Accordion>

## 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.

```css title="src/cometchat-overrides.css" theme={null}
.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` | `#5d49be` | `#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

```css title="src/cometchat-overrides.css" theme={null}
/* 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

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

<Note>
  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](/ui-kit/react/theming#component-css-classes) for details.
</Note>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.