> ## 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 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-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/775aa09b-theming_light-d42812a5da605e05dbd958ada9e1d72e.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=27beab0c3cdbc9c157b76d444746a94a" 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-llms-scoped-indexes/LUAnk4kNde8CLq7p/images/82ac0120-theming_dark-cb83fbadb54727ba62037df9b46a84ab.png?fit=max&auto=format&n=LUAnk4kNde8CLq7p&q=85&s=b87b560457dff50083c05c07963ca432" 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-llms-scoped-indexes/yGOD4hG5x8gw_zqp/images/782be32a-theming_light_custom-c09d25d13689506d39bc5b9266a2c273.png?fit=max&auto=format&n=yGOD4hG5x8gw_zqp&q=85&s=a619cea72b7223b8ebae7abc72735b93" 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>


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