Component Styling

Customize visual appearance using ThemeData extensions or component-level style objects.

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,
    ),
  ],
)

---

Related

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