Skip to main content

Documentation Index

Fetch the complete documentation index at: https://cometchat-22654f5b-docs-android-v6-beta2.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

FieldValue
MethodAdd component style classes to ThemeData.extensions
ComponentsConversations, MessageList, MessageComposer, MessageHeader, Users, Groups, GroupMembers
Base componentsAvatar, Badge, StatusIndicator, Receipts, Reactions, ReactionList, MediaRecorder
AI componentsConversationStarter, ConversationSummary, SmartReplies, AIOptionSheet, AIAssistantChatHistory
Option sheetsMessageOptionSheet, AttachmentOptionSheet, AIOptionSheet
PatternCometChat<Component>Style classes
SourceGitHub
Style individual components by adding their style classes to ThemeData.extensions.

​
Main Components

​
Conversations

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

​
Message List

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

​
Message Composer

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

​
Message Header

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

​
Users

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

​
Groups

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

​
Group Members

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

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

​
Badge

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

​
Status Indicator

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

​
Receipts

CometChatMessageReceiptStyle(
  readIconColor: Color(0xFFFFAB00),
)

​
Reactions

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

​
Reaction List

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

​
Media Recorder

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

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

​
Attachment Option Sheet

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

​
Message Information

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

​
Mentions

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

​
AI Components

​
Conversation Starter

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

​
Smart Replies

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

​
Conversation Summary

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

​
AI Option Sheet

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

​
AI Assistant Chat History

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