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

# Theming In CometChat Flutter UI Kit V6

> Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension.

CometChat's theming framework is a robust system that empowers developers to define the look and feel of their applications with precision and consistency. It follows three essential design system principles: Color, Typography, and Shape.

> The theming system is identical between V5 and V6. All theme classes, properties, and APIs work the same way.

## Theming Overview

Theming in the UI Kit consists of three core components:

* **Color:** Managed through `CometChatColorPalette`, it controls the application's color scheme, including primary, neutral, alert, and text colors.
* **Typography:** Defined via `CometChatTypography`, it standardizes text styles, such as font size and weight.
* **Shape:** Configured using `CometChatSpacing`, it defines the structure of margins, paddings, and border radii.

## Key Benefits

* Achieve consistent UI design across your application.
* Support for light and dark themes.
* Easy scalability and customization for app-specific requirements.

## Light and Dark Themes

The Chat UI Kit supports both light and dark themes. V6 adds dedicated icon variants:

* `assets/icons/light/` — light mode icons
* `assets/icons/dark/` — dark mode icons
* `assets/icons/svg/calls/` — SVG call icons

## Custom Theme

The Chat UI Kit offers robust support for creating customized themes using `CometChatColorPalette`, `CometChatTypography`, and `CometChatSpacing` with Flutter's `ThemeExtension`.

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

## Core Components

### Color

The `CometChatColorPalette` class manages colors in your app:

* **Primary Colors:** Base colors and extended shades.
* **Neutral Colors:** Shades for surfaces and backgrounds.
* **Alert Colors:** Colors for states like success, error, warning, and info.
* **Text Colors:** Differentiated for primary, secondary, and disabled states.

### Typography

The `CometChatTypography` class standardizes text styles:

* **Headings:** Text styles for various heading levels.
* **Body:** Styling for regular text.
* **Captions:** Smaller text style for labels.
* **Buttons:** Text style for button text.
* **Links:** Styles for clickable links.
* **Titles:** Style for main titles or component headers.

### Spacing

The `CometChatSpacing` class defines layout structure:

* **Padding:** Internal spacing within elements.
* **Margin:** Space between elements.
* **Radius:** Corner rounding of UI elements.

## Best Practices

* **Ensure Contrast:** Follow accessibility guidelines to maintain a minimum contrast ratio.
* **Consistency:** Use a consistent color palette across all components.
* **Adaptability:** Test your theme in various scenarios, such as low-light and high-contrast environments.