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

# Color Resources

> Complete reference for CometChatColorPalette tokens in Flutter UI Kit.

<Accordion title="AI Agent Component Spec">
  | Field      | Value                                                                                                    |
  | ---------- | -------------------------------------------------------------------------------------------------------- |
  | Class      | `CometChatColorPalette`                                                                                  |
  | Usage      | `ThemeData(extensions: [CometChatColorPalette(...)])`                                                    |
  | Categories | Primary, Neutral, Alert, Text, Icon, Border, Background, Button, Shimmer                                 |
  | Light mode | Use light color values                                                                                   |
  | Dark mode  | Use dark color values                                                                                    |
  | Source     | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme/colors) |
</Accordion>

`CometChatColorPalette` controls all colors in the UI Kit. Apply it via `ThemeData.extensions`.

***

## Complete Token Reference

### Primary Colors

| Token                | Description                             |
| -------------------- | --------------------------------------- |
| `primary`            | Main accent color                       |
| `extendedPrimary50`  | 96% lighter (light) / 80% darker (dark) |
| `extendedPrimary100` | 88% lighter (light) / 72% darker (dark) |
| `extendedPrimary200` | 77% lighter (light) / 64% darker (dark) |
| `extendedPrimary300` | 66% lighter (light) / 56% darker (dark) |
| `extendedPrimary400` | 55% lighter (light) / 48% darker (dark) |
| `extendedPrimary500` | 44% lighter (light) / 40% darker (dark) |
| `extendedPrimary600` | 33% lighter (light) / 32% darker (dark) |
| `extendedPrimary700` | 22% lighter (light) / 24% darker (dark) |
| `extendedPrimary800` | 11% lighter (light) / 16% darker (dark) |
| `extendedPrimary900` | 11% lighter (light) / 8% darker (dark)  |

### Neutral Colors

| Token                      | Description                                                                     |
| -------------------------- | ------------------------------------------------------------------------------- |
| `neutral50` - `neutral900` | Surface and background shades (50, 100, 200, 300, 400, 500, 600, 700, 800, 900) |

### Alert Colors

| Token      | Description                 |
| ---------- | --------------------------- |
| `info`     | Information indicator       |
| `warning`  | Warning indicator           |
| `error`    | Error indicator             |
| `success`  | Success indicator           |
| `error100` | Light/dark mode error shade |

### Text Colors

| Token           | Description      |
| --------------- | ---------------- |
| `textPrimary`   | Primary text     |
| `textSecondary` | Secondary text   |
| `textTertiary`  | Tertiary text    |
| `textDisabled`  | Disabled text    |
| `textWhite`     | White text       |
| `textHighlight` | Highlighted text |

### Icon Colors

| Token           | Description      |
| --------------- | ---------------- |
| `iconPrimary`   | Primary icon     |
| `iconSecondary` | Secondary icon   |
| `iconTertiary`  | Tertiary icon    |
| `iconWhite`     | White icon       |
| `iconHighlight` | Highlighted icon |

### Border Colors

| Token             | Description        |
| ----------------- | ------------------ |
| `borderLight`     | Light border       |
| `borderDefault`   | Default border     |
| `borderDark`      | Dark border        |
| `borderHighlight` | Highlighted border |

### Background Colors

| Token         | Description           |
| ------------- | --------------------- |
| `background1` | Primary background    |
| `background2` | Secondary background  |
| `background3` | Tertiary background   |
| `background4` | Quaternary background |

### Button Colors

| Token                       | Description                 |
| --------------------------- | --------------------------- |
| `buttonBackground`          | Primary button background   |
| `secondaryButtonBackground` | Secondary button background |
| `buttonIconColor`           | Primary button icon         |
| `buttonText`                | Primary button text         |
| `secondaryButtonIcon`       | Secondary button icon       |
| `secondaryButtonText`       | Secondary button text       |

### Other

| Token               | Description               |
| ------------------- | ------------------------- |
| `shimmerBackground` | Shimmer effect background |
| `shimmerGradient`   | Shimmer effect gradient   |
| `messageSeen`       | Read receipt indicator    |
| `white`             | White color               |
| `black`             | Black color               |
| `transparent`       | Transparent color         |

***

## Light Mode

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/-S5qACEOIWfW5CsV/images/775aa09b-theming_light-d42812a5da605e05dbd958ada9e1d72e.png?fit=max&auto=format&n=-S5qACEOIWfW5CsV&q=85&s=a93954200fbf5dd06554b284e7c74069" width="2884" height="1670" data-path="images/775aa09b-theming_light-d42812a5da605e05dbd958ada9e1d72e.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFF6852D6),
          textPrimary: Color(0xFF141414),
          textSecondary: Color(0xFF727272),
          background1: Color(0xFFFFFFFF),
          borderLight: Color(0xFFF5F5F5),
          borderDark: Color(0xFFDCDCDC),
          iconSecondary: Color(0xFFA1A1A1),
          iconHighlight: Color(0xFF6852D6),
          success: Color(0xFF09C26F),
          warning: Color(0xFFFAAB00),
          extendedPrimary500: Color(0xFFAA9EE8),
          messageSeen: Color(0xFF56E8A7),
          neutral300: Color(0xFFE8E8E8),
          neutral600: Color(0xFF727272),
          neutral900: Color(0xFF141414),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## Dark Mode

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/7u2IVu2u8EK1e2Ep/images/82ac0120-theming_dark-cb83fbadb54727ba62037df9b46a84ab.png?fit=max&auto=format&n=7u2IVu2u8EK1e2Ep&q=85&s=8a9642a35aa31cc6277d49dfc301e8cb" width="2884" height="1670" data-path="images/82ac0120-theming_dark-cb83fbadb54727ba62037df9b46a84ab.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFF6852D6),
          textPrimary: Color(0xFFFFFFFF),
          textSecondary: Color(0xFF989898),
          background1: Color(0xFF1A1A1A),
          borderLight: Color(0xFF272727),
          iconSecondary: Color(0xFF858585),
          iconHighlight: Color(0xFF6852D6),
          success: Color(0xFF0B9F5D),
          warning: Color(0xFFD08D04),
          extendedPrimary500: Color(0xFF3E3180),
          messageSeen: Color(0xFF56E8A7),
          neutral300: Color(0xFF383838),
          neutral600: Color(0xFF989898),
          neutral900: Color(0xFFFFFFFF),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## Custom Brand Colors

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-content-webhooks/-S5qACEOIWfW5CsV/images/782be32a-theming_light_custom-c09d25d13689506d39bc5b9266a2c273.png?fit=max&auto=format&n=-S5qACEOIWfW5CsV&q=85&s=1bd79b86b55f25ef78c10d1a9f60fb2d" width="2884" height="1670" data-path="images/782be32a-theming_light_custom-c09d25d13689506d39bc5b9266a2c273.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFFF76808),
          iconHighlight: Color(0xFFF76808),
          extendedPrimary500: Color(0xFFFBAA75),
          textPrimary: Color(0xFF141414),
          textSecondary: Color(0xFF727272),
          background1: Color(0xFFFFFFFF),
          borderLight: Color(0xFFF5F5F5),
          borderDark: Color(0xFFDCDCDC),
          success: Color(0xFF09C26F),
          warning: Color(0xFFFAAB00),
          messageSeen: Color(0xFF56E8A7),
          neutral300: Color(0xFFE8E8E8),
          neutral600: Color(0xFF727272),
          neutral900: Color(0xFF141414),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>