Component Styling - CometChat Docs

The Flutter UI Kit uses ThemeExtension for styling. You can apply styles globally via ThemeData or pass style objects directly to components.

Two Approaches

1. Global Theming via ThemeData

Apply styles across your entire app by adding ThemeExtension objects to your MaterialApp theme:

Dart

MaterialApp(
  theme: ThemeData(
    extensions: [
      CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
      CometChatIncomingMessageBubbleStyle(
        backgroundColor: Color(0xFFFEEDE1),
      ),
      CometChatActionBubbleStyle(
        textStyle: TextStyle(color: Color(0xFFF76808)),
        backgroundColor: Color(0xFFFEEDE1),
      ),
    ],
  ),
  home: YourApp(),
)

2. Component-Level Styles

Pass style objects directly to a component. These override global theme values:

Dart

CometChatMessageList(
  user: user,
  style: CometChatMessageListStyle(
    backgroundColor: Color(0xFFFEEDE1),
    outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
    incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
      backgroundColor: Colors.white,
    ),
  ),
)

Style Precedence

Component style prop > ThemeData extension > Default theme

Style Classes by Component

Component	Style Class
`CometChatConversations`	`CometChatConversationsStyle`
`CometChatUsers`	`CometChatUsersStyle`
`CometChatGroups`	`CometChatGroupsStyle`
`CometChatGroupMembers`	`CometChatGroupMembersStyle`
`CometChatMessageList`	`CometChatMessageListStyle`
`CometChatMessageComposer`	`CometChatMessageComposerStyle`
`CometChatMessageHeader`	`CometChatMessageHeaderStyle`

Message Bubble Styles

The message list style contains nested styles for incoming and outgoing bubbles:

Dart

CometChatMessageListStyle(
  outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
    textBubbleStyle: CometChatTextBubbleStyle(...),
    imageBubbleStyle: CometChatImageBubbleStyle(...),
    videoBubbleStyle: CometChatVideoBubbleStyle(...),
    audioBubbleStyle: CometChatAudioBubbleStyle(...),
    fileBubbleStyle: CometChatFileBubbleStyle(...),
    deletedBubbleStyle: CometChatDeletedBubbleStyle(...),
    pollsBubbleStyle: CometChatPollsBubbleStyle(...),
    stickerBubbleStyle: CometChatStickerBubbleStyle(...),
    collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(...),
    collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(...),
    linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(...),
    videoCallBubbleStyle: CometChatCallBubbleStyle(...),
  ),
  incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
    // Same nested style structure
  ),
)

See Message Bubble Styling for per-bubble-type examples.

Component Style Examples

Conversations

Dart

ThemeData(
  fontFamily: 'Times New Roman',
  extensions: [
    CometChatConversationsStyle(
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
        backgroundColor: Color(0xFFFBAA75),
      ),
      badgeStyle: CometChatBadgeStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
  ],
)

Message List

Dart

ThemeData(
  extensions: [
    CometChatMessageListStyle(
      backgroundColor: Color(0xFFFEEDE1),
      outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
        backgroundColor: Color(0xFFF76808),
      ),
    ),
  ],
)

Message Composer

Dart

ThemeData(
  extensions: [
    CometChatMessageComposerStyle(
      sendButtonIconBackgroundColor: Color(0xFFF76808),
      secondaryButtonIconColor: Color(0xFFF76808),
      auxiliaryButtonIconColor: Color(0xFFF76808),
    ),
  ],
)

Message Header

Dart

ThemeData(
  extensions: [
    CometChatMessageHeaderStyle(
      avatarStyle: CometChatAvatarStyle(
        backgroundColor: Color(0xFFFBAA75),
        borderRadius: BorderRadius.circular(6.67),
      ),
    ),
  ],
)

Users

Dart

ThemeData(
  extensions: [
    CometChatUsersStyle(
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
        backgroundColor: Color(0xFFFBAA75),
      ),
      titleTextColor: Color(0xFFF76808),
      separatorColor: Color(0xFFF76808),
      backgroundColor: Color(0xFFFFF9F5),
    ),
  ],
)

Groups

Dart

ThemeData(
  extensions: [
    CometChatGroupsStyle(
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
        backgroundColor: Color(0xFFFBAA75),
      ),
      titleTextColor: Color(0xFFF76808),
      separatorColor: Color(0xFFF76808),
      backgroundColor: Color(0xFFFFF9F5),
    ),
  ],
)

Group Members

Dart

ThemeData(
  extensions: [
    CometChatGroupMembersStyle(
      avatarStyle: CometChatAvatarStyle(
        borderRadius: BorderRadius.circular(8),
        backgroundColor: Color(0xFFFBAA75),
      ),
      titleStyle: TextStyle(color: Color(0xFFF76808)),
      separatorColor: Color(0xFFF76808),
      ownerMemberScopeBackgroundColor: Color(0xFFF76808),
      adminMemberScopeBackgroundColor: Color(0xFFFEEDE1),
      adminMemberScopeBorder: Border.all(color: Color(0xFFF76808)),
      adminMemberScopeTextColor: Color(0xFFF76808),
    ),
  ],
)

AI Assistant Chat History

Dart

final ccColor = CometChatThemeHelper.getColorPalette(context);
CometChatAIAssistantChatHistory(
  user: user,
  style: CometChatAIAssistantChatHistoryStyle(
    backgroundColor: const Color(0xFFFFFAF6),
    headerBackgroundColor: const Color(0xFFFFFAF6),
    headerTitleTextColor: ccColor.textPrimary,
  ),
)

Base Component Styles

Avatar

Dart

ThemeData(
  extensions: [
    CometChatAvatarStyle(
      borderRadius: BorderRadius.circular(8),
      backgroundColor: Color(0xFFFBAA75),
    ),
  ],
)

Status Indicator

Dart

ThemeData(
  extensions: [
    CometChatStatusIndicatorStyle(
      backgroundColor: Color(0xFFFFAB00),
      borderRadius: BorderRadius.circular(2),
    ),
  ],
)

Badge

Dart

ThemeData(
  extensions: [
    CometChatBadgeStyle(
      borderRadius: BorderRadius.circular(4),
      backgroundColor: Color(0xFFF44649),
    ),
  ],
)

Receipts

Dart

ThemeData(
  extensions: [
    CometChatMessageReceiptStyle(
      readIconColor: Color(0xFFFFAB00),
    ),
  ],
)

Media Recorder

Dart

ThemeData(
  extensions: [
    CometChatMediaRecorderStyle(
      recordIndicatorBackgroundColor: Color(0xFFF44649),
      recordIndicatorBorderRadius: BorderRadius.circular(20),
      pauseButtonBorderRadius: BorderRadius.circular(8),
      deleteButtonBorderRadius: BorderRadius.circular(8),
      stopButtonBorderRadius: BorderRadius.circular(8),
    ),
  ],
)

Reactions

Dart

ThemeData(
  extensions: [
    CometChatReactionsStyle(
      borderRadius: BorderRadius.circular(8),
    ),
  ],
)

Reaction List

Dart

ThemeData(
  extensions: [
    CometChatReactionListStyle(
      activeTabTextColor: Color(0xFFF76808),
      activeTabIndicatorColor: Color(0xFFF76808),
    ),
  ],
)

Conversation Starter

Dart

ThemeData(
  extensions: [
    CometChatAIConversationStarterStyle(
      backgroundColor: Color(0xFFFEEDE1),
      border: Border.all(color: Color(0xFFFBBB90)),
    ),
  ],
)

Conversation Summary

Dart

ThemeData(
  extensions: [
    CometChatAIConversationSummaryStyle(
      backgroundColor: Color(0xFFFEEDE1),
      titleStyle: TextStyle(color: Color(0xFFF76808)),
    ),
  ],
)

Smart Replies

Dart

ThemeData(
  extensions: [
    CometChatAISmartRepliesStyle(
      backgroundColor: Color(0xFFFEEDE1),
      titleStyle: TextStyle(color: Color(0xFFF76808)),
      itemBackgroundColor: Color(0xFFFFF9F5),
      itemBorder: Border.all(color: Color(0xFFFBBB90)),
    ),
  ],
)

Message Information

Dart

ThemeData(
  fontFamily: "Times New Roman",
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
    CometChatMessageInformationStyle(
      backgroundHighLightColor: Color(0xFFFEEDE1),
      messageReceiptStyle: CometChatMessageReceiptStyle(
        readIconColor: Color(0xFFF76808),
      ),
    ),
  ],
)

Message Option Sheet

Dart

ThemeData(
  extensions: [
    CometChatMessageOptionSheetStyle(
      backgroundColor: Color(0xFFFEEDE1),
      iconColor: Color(0xFFF76808),
    ),
  ],
)

Attachment Option Sheet

Dart

ThemeData(
  extensions: [
    CometChatAttachmentOptionSheetStyle(
      backgroundColor: Color(0xFFFEEDE1),
      iconColor: Color(0xFFF76808),
    ),
  ],
)

AI Option Sheet

Dart

ThemeData(
  extensions: [
    CometChatAiOptionSheetStyle(
      backgroundColor: Color(0xFFFFF9F5),
      iconColor: Color(0xFFF76808),
    ),
  ],
)

Mentions

Dart

ThemeData(
  extensions: [
    CometChatMentionsStyle(
      mentionSelfTextBackgroundColor: Color(0xFFF76808),
      mentionTextBackgroundColor: Colors.white,
      mentionTextColor: Colors.black,
      mentionSelfTextColor: Colors.white,
    ),
  ],
)

Message Bubble Styling — Per-bubble-type style examples.
Color Resources — Color palette customization.
Theme Introduction — Theme system overview (ColorPalette, Typography, Spacing).
Customization Overview — All customization categories.

​Two Approaches

​1. Global Theming via ThemeData

​2. Component-Level Styles

​Style Precedence

​Style Classes by Component

​Message Bubble Styles

​Component Style Examples

​Conversations

​Message List

​Message Composer

​Message Header

​Users

​Groups

​Group Members

​AI Assistant Chat History

​Base Component Styles

​Avatar

​Status Indicator

​Badge

​Receipts

​Media Recorder

​Reactions

​Reaction List

​Conversation Starter

​Conversation Summary

​Smart Replies

​Message Information

​Message Option Sheet

​Attachment Option Sheet

​AI Option Sheet

​Mentions

​Related