Skip to main content
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. 
ThemeData(
  fontFamily: 'Times New Roman',
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFFF76808),
    ),
  ],
)

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