> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.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>