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

# Theming

> Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode.

<Accordion title="AI Agent Component Spec">
  | Field      | Value                                                                                             |
  | ---------- | ------------------------------------------------------------------------------------------------- |
  | Goal       | Customize UI Kit appearance (colors, fonts, spacing) via Flutter ThemeExtensions                  |
  | Where      | `ThemeData.extensions` in `MaterialApp`                                                           |
  | Color      | `CometChatColorPalette` — primary, neutral, alert, text, icon, background colors                  |
  | Typography | `CometChatTypography` — font sizes, weights, text styles                                          |
  | Spacing    | `CometChatSpacing` — padding, margin, border radius                                               |
  | Dark mode  | Use separate `CometChatColorPalette` for dark theme                                               |
  | Source     | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/shared_uikit/lib/src/theme) |
</Accordion>

Theming controls the look and feel of the chat UI — colors, fonts, and spacing — through Flutter's `ThemeExtension` system.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-audit-mechanical-fixes/VZsUD1BhmDvn_t8v/images/c99c5938-overview-e5cf780083fc15bf61c94d8050ae62c7.png?fit=max&auto=format&n=VZsUD1BhmDvn_t8v&q=85&s=f251780eff0451a4dffba7aa8008b972" width="2884" height="1670" data-path="images/c99c5938-overview-e5cf780083fc15bf61c94d8050ae62c7.png" />
</Frame>

***

## Core Components

| Component  | Class                   | Purpose                                                |
| ---------- | ----------------------- | ------------------------------------------------------ |
| Color      | `CometChatColorPalette` | Primary, neutral, alert, text, icon, background colors |
| Typography | `CometChatTypography`   | Font sizes, weights, text styles                       |
| Spacing    | `CometChatSpacing`      | Padding, margin, border radius                         |

### Typography Tokens

| Token                   | Purpose             |
| ----------------------- | ------------------- |
| `heading1` - `heading4` | Heading text styles |
| `body`                  | Body text           |
| `caption1`, `caption2`  | Caption text        |
| `button`                | Button text         |
| `link`                  | Link text           |
| `title`                 | Title text          |

### Spacing Tokens

| Token                             | Default Value                |
| --------------------------------- | ---------------------------- |
| `spacing` - `spacing20`           | 2px - 80px (increments of 4) |
| `padding` - `padding10`           | Derived from spacing         |
| `margin` - `margin20`             | Derived from spacing         |
| `radius` - `radius6`, `radiusMax` | Border radius values         |

***

## Basic Usage

Override theme properties in your `MaterialApp`:

<Tabs>
  <Tab title="Dart">
    ```dart title="main.dart" theme={null}
    MaterialApp(
      theme: ThemeData(
        fontFamily: 'Roboto',
        extensions: [
          CometChatColorPalette(
            primary: Color(0xFFF76808),
            textPrimary: Color(0xFF141414),
            background1: Color(0xFFFFFFFF),
          ),
        ],
      ),
      home: MyApp(),
    )
    ```
  </Tab>
</Tabs>

***

## Light and Dark Themes

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

<Tabs>
  <Tab title="Light Theme">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFF6852D6),
          textPrimary: Color(0xFF141414),
          textSecondary: Color(0xFF727272),
          background1: Color(0xFFFFFFFF),
          borderLight: Color(0xFFF5F5F5),
        ),
      ],
    )
    ```
  </Tab>

  <Tab title="Dark Theme">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFF6852D6),
          textPrimary: Color(0xFFFFFFFF),
          textSecondary: Color(0xFF989898),
          background1: Color(0xFF1A1A1A),
          borderLight: Color(0xFF272727),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

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

***

## Custom Brand Colors

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      fontFamily: 'Times New Roman',
      extensions: [
        CometChatColorPalette(
          primary: Color(0xFFF76808),
          iconHighlight: Color(0xFFF76808),
          extendedPrimary500: Color(0xFFFBAA75),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Color Resources" icon="palette" href="/ui-kit/flutter/v5/color-resources">
    Full list of color tokens
  </Card>

  <Card title="Component Styling" icon="sliders" href="/ui-kit/flutter/v5/component-styling">
    Style individual components
  </Card>

  <Card title="Message Bubbles" icon="message" href="/ui-kit/flutter/v5/message-bubble-styling">
    Customize message bubbles
  </Card>

  <Card title="Localization" icon="globe" href="/ui-kit/flutter/v5/localize">
    Multi-language support
  </Card>
</CardGroup>