Component Styling - CometChat Docs

AI Agent Component Spec

Field	Value
Method	Add component style classes to `ThemeData.extensions`
Components	Conversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers
Base components	Avatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder
AI components	ConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory
Option sheets	MessageOptionSheet, AttachmentOptionSheet, AIOptionSheet
Pattern	`CometChat<Component>Style` classes
Source	GitHub

Style individual components by adding their style classes to ThemeData.extensions.

Main Components

Conversations

Dart

ThemeData(
  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),
      ),
      callButtonsStyle: CometChatCallButtonsStyle(
        voiceCallIconColor: Color(0xFFF76808),
        videoCallIconColor: Color(0xFFF76808),
      ),
    ),
  ],
)

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),
      moderatorMemberScopeBackgroundColor: Color(0xFFFEEDE1),
      moderatorMemberScopeTextColor: Color(0xFFF76808),
      backIconColor: Color(0xFFF76808),
    ),
  ],
)

Base Components

Avatar

Dart

CometChatAvatarStyle(
  borderRadius: BorderRadius.circular(8),
  backgroundColor: Color(0xFFFBAA75),
)

Badge

Dart

CometChatBadgeStyle(
  borderRadius: BorderRadius.circular(4),
  backgroundColor: Color(0xFFF44649),
)

Status Indicator

Dart

CometChatStatusIndicatorStyle(
  backgroundColor: Color(0xFFFFAB00),
  borderRadius: BorderRadius.circular(2),
)

Receipts

Dart

CometChatMessageReceiptStyle(
  readIconColor: Color(0xFFFFAB00),
)

Reactions

Dart

CometChatReactionsStyle(
  borderRadius: BorderRadius.circular(8),
)

Reaction List

Dart

CometChatReactionListStyle(
  activeTabTextColor: Color(0xFFF76808),
  activeTabIndicatorColor: Color(0xFFF76808),
)

Media Recorder

Dart

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

Option Sheets

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

Message Information

Dart

ThemeData(
  extensions: [
    CometChatOutgoingMessageBubbleStyle(
      backgroundColor: Color(0xFFF76808),
    ),
    CometChatMessageInformationStyle(
      backgroundHighLightColor: Color(0xFFFEEDE1),
      messageReceiptStyle: CometChatMessageReceiptStyle(
        readIconColor: Color(0xFFF76808),
      ),
    ),
  ],
)

Mentions

Dart

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

AI Components

Conversation Starter

Dart

CometChatAIConversationStarterStyle(
  backgroundColor: Color(0xFFFEEDE1),
  border: Border.all(color: Color(0xFFFBBB90)),
)

Smart Replies

Dart

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

Conversation Summary

Dart

CometChatAIConversationSummaryStyle(
  backgroundColor: Color(0xFFFEEDE1),
  titleStyle: TextStyle(color: Color(0xFFF76808)),
)

AI Option Sheet

Dart

CometChatAiOptionSheetStyle(
  backgroundColor: Color(0xFFFFF9F5),
  iconColor: Color(0xFFF76808),
)

AI Assistant Chat History

Dart

final ccColor = CometChatThemeHelper.getColorPalette(context);

CometChatAIAssistantChatHistory(
  user: user,
  style: CometChatAIAssistantChatHistoryStyle(
    backgroundColor: Color(0xFFFFFAF6),
    headerBackgroundColor: Color(0xFFFFFAF6),
    headerTitleTextColor: ccColor.textPrimary,
    newChatIconColor: ccColor.iconSecondary,
    newChatTextColor: ccColor.textPrimary,
    dateSeparatorStyle: CometChatDateStyle(
      textColor: ccColor.textTertiary,
      backgroundColor: Color(0xFFFFFAF6),
    ),
    itemTextColor: ccColor.textPrimary,
  ),
)

​Main Components

​Conversations

​Message List

​Message Composer

​Message Header

​Users

​Groups

​Group Members

​Base Components

​Avatar

​Badge

​Status Indicator

​Receipts

​Reactions

​Reaction List

​Media Recorder

​Option Sheets

​Message Option Sheet

​Attachment Option Sheet

​Message Information

​Mentions

​AI Components

​Conversation Starter

​Smart Replies

​Conversation Summary

​AI Option Sheet

​AI Assistant Chat History

Main Components

Conversations

Message List

Message Composer

Message Header

Users

Groups

Group Members

Base Components

Avatar

Badge

Status Indicator

Receipts

Reactions

Reaction List

Media Recorder

Option Sheets

Message Option Sheet

Attachment Option Sheet

Message Information

Mentions

AI Components

Conversation Starter

Smart Replies

Conversation Summary

AI Option Sheet

AI Assistant Chat History