> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-skills-v5-temp.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.

<Accordion title="AI Integration Quick Reference">
  | Field       | Value                                                                                                                                                                                                 |
  | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
  | Package     | `cometchat_chat_uikit`                                                                                                                                                                                |
  | Import      | `import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';`                                                                                                                                    |
  | Purpose     | Customize CometChat Flutter UI Kit themes with color palettes, typography, spacing, light and dark mode, icons, and ThemeExtension.                                                                   |
  | Key classes | `CometChatColorPalette` · `CometChatTheme`                                                                                                                                                            |
  | Mechanism   | Register `CometChatColorPalette`, `CometChatTypography` and `CometChatSpacing` in `ThemeData.extensions` — the kit reads them through Flutter's `ThemeExtension`, there is no CometChat theme object. |
  | Constraints | Register on **both** the light and dark `ThemeData` or one mode silently keeps kit defaults. Widget backgrounds are **not** covered — scope those with each widget's own style object.                |
  | Related     | [Color Resources](/ui-kit/flutter/color-resources) · [Component Styling](/ui-kit/flutter/component-styling) · [Customizing Message Bubbles](/ui-kit/flutter/message-bubble-styling)                   |
</Accordion>

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>

### Adding extensions without dropping existing ones

Assigning `extensions:` replaces whatever the ancestor `ThemeData` already provided, which
silently drops any extension registered further up the tree. When you are theming a subtree
rather than the whole app, use `CometChatTheme.mergeThemeExtensions` to append yours to the
inherited set instead of overwriting it.

`CometChatTheme` exists only for this helper — it holds no palette of its own.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    import 'package:cometchat_chat_uikit/cometchat_chat_uikit.dart';
    import 'package:flutter/material.dart';

    Widget themedSubtree(BuildContext context, Widget child) {
      return Theme(
        data: Theme.of(context).copyWith(
          extensions: CometChatTheme.mergeThemeExtensions(context, [
            CometChatColorPalette(primary: const Color(0xFFF76808)),
          ]),
        ),
        child: child,
      );
    }
    ```
  </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.