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

> Customize the CometChat Flutter UI Kit theme with palettes for light mode, dark mode, backgrounds, text, borders, icons, and buttons.

## Introducing CometChatColorPalette

The `CometChatColorPalette` class allows you to customize the colors used throughout your app. It works the same way in V6 as in V5 — you assign it to the `extensions` property of your `ThemeData`.

Here's what you can customize:

* Primary Colors — Main color scheme of your app
* Neutral Colors — Balanced base for visuals
* Alert Colors — Informative, warning, success, and error messages
* Background Colors — Background shades for different areas
* Text Colors — Text element colors for readability
* Border Colors — Borders for buttons and cards
* Icon Colors — App icon colors
* Button Colors — Button background and text colors
* Shimmer Colors — Loading animation colors

### Light Mode

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

### Dark Mode

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

### Custom Colors

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