Theming - CometChat Docs

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

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

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:

Dart

main.dart

MaterialApp(
  theme: ThemeData(
    fontFamily: 'Roboto',
    extensions: [
      CometChatColorPalette(
        primary: Color(0xFFF76808),
        textPrimary: Color(0xFF141414),
        background1: Color(0xFFFFFFFF),
      ),
    ],
  ),
  home: MyApp(),
)

Light and Dark Themes

Light Theme
Dark Theme

ThemeData(
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFF6852D6),
      textPrimary: Color(0xFF141414),
      textSecondary: Color(0xFF727272),
      background1: Color(0xFFFFFFFF),
      borderLight: Color(0xFFF5F5F5),
    ),
  ],
)

ThemeData(
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFF6852D6),
      textPrimary: Color(0xFFFFFFFF),
      textSecondary: Color(0xFF989898),
      background1: Color(0xFF1A1A1A),
      borderLight: Color(0xFF272727),
    ),
  ],
)

Custom Brand Colors

Dart

ThemeData(
  fontFamily: 'Times New Roman',
  extensions: [
    CometChatColorPalette(
      primary: Color(0xFFF76808),
      iconHighlight: Color(0xFFF76808),
      extendedPrimary500: Color(0xFFFBAA75),
    ),
  ],
)

Next Steps

Color Resources

Full list of color tokens

Component Styling

Style individual components

Message Bubbles

Customize message bubbles

Localization

Multi-language support

​Core Components

​Typography Tokens

​Spacing Tokens

​Basic Usage

​Light and Dark Themes

​Custom Brand Colors

​Next Steps