Theming

Customize the CometChat Flutter UI Kit appearance using ThemeExtensions for colors, fonts, spacing, and dark mode.

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

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

Dark Theme

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