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

# 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-llms-scoped-indexes/IswwmAgbm47WtdFq/images/c99c5938-overview-e5cf780083fc15bf61c94d8050ae62c7.png?fit=max&auto=format&n=IswwmAgbm47WtdFq&q=85&s=214257e41e580d2f0ef087b823e38b8a" 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-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="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-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>

***

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


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