> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Component Styling
> Style individual CometChat Flutter UI Kit components using ThemeExtensions.
| 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 | `CometChatStyle` classes |
| Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
Style individual components by adding their style classes to `ThemeData.extensions`.
***
## Main Components
### Conversations
```dart theme={null}
ThemeData(
extensions: [
CometChatConversationsStyle(
avatarStyle: CometChatAvatarStyle(
borderRadius: BorderRadius.circular(8),
backgroundColor: Color(0xFFFBAA75),
),
badgeStyle: CometChatBadgeStyle(
backgroundColor: Color(0xFFF76808),
),
),
],
)
```
### Message List
```dart theme={null}
ThemeData(
extensions: [
CometChatMessageListStyle(
backgroundColor: Color(0xFFFEEDE1),
outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
backgroundColor: Color(0xFFF76808),
),
),
],
)
```
### Message Composer
```dart theme={null}
ThemeData(
extensions: [
CometChatMessageComposerStyle(
sendButtonIconBackgroundColor: Color(0xFFF76808),
secondaryButtonIconColor: Color(0xFFF76808),
auxiliaryButtonIconColor: Color(0xFFF76808),
),
],
)
```
### Message Header
```dart theme={null}
ThemeData(
extensions: [
CometChatMessageHeaderStyle(
avatarStyle: CometChatAvatarStyle(
backgroundColor: Color(0xFFFBAA75),
borderRadius: BorderRadius.circular(6.67),
),
callButtonsStyle: CometChatCallButtonsStyle(
voiceCallIconColor: Color(0xFFF76808),
videoCallIconColor: Color(0xFFF76808),
),
),
],
)
```
### Users
```dart theme={null}
ThemeData(
extensions: [
CometChatUsersStyle(
avatarStyle: CometChatAvatarStyle(
borderRadius: BorderRadius.circular(8),
backgroundColor: Color(0xFFFBAA75),
),
titleTextColor: Color(0xFFF76808),
separatorColor: Color(0xFFF76808),
backgroundColor: Color(0xFFFFF9F5),
),
],
)
```
### Groups
```dart theme={null}
ThemeData(
extensions: [
CometChatGroupsStyle(
avatarStyle: CometChatAvatarStyle(
borderRadius: BorderRadius.circular(8),
backgroundColor: Color(0xFFFBAA75),
),
titleTextColor: Color(0xFFF76808),
separatorColor: Color(0xFFF76808),
backgroundColor: Color(0xFFFFF9F5),
),
],
)
```
### Group Members
```dart theme={null}
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 theme={null}
CometChatAvatarStyle(
borderRadius: BorderRadius.circular(8),
backgroundColor: Color(0xFFFBAA75),
)
```
### Badge
```dart theme={null}
CometChatBadgeStyle(
borderRadius: BorderRadius.circular(4),
backgroundColor: Color(0xFFF44649),
)
```
### Status Indicator
```dart theme={null}
CometChatStatusIndicatorStyle(
backgroundColor: Color(0xFFFFAB00),
borderRadius: BorderRadius.circular(2),
)
```
### Receipts
```dart theme={null}
CometChatMessageReceiptStyle(
readIconColor: Color(0xFFFFAB00),
)
```
### Reactions
```dart theme={null}
CometChatReactionsStyle(
borderRadius: BorderRadius.circular(8),
)
```
### Reaction List
```dart theme={null}
CometChatReactionListStyle(
activeTabTextColor: Color(0xFFF76808),
activeTabIndicatorColor: Color(0xFFF76808),
)
```
### Media Recorder
```dart theme={null}
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 theme={null}
ThemeData(
extensions: [
CometChatMessageOptionSheetStyle(
backgroundColor: Color(0xFFFEEDE1),
iconColor: Color(0xFFF76808),
),
],
)
```
### Attachment Option Sheet
```dart theme={null}
ThemeData(
extensions: [
CometChatAttachmentOptionSheetStyle(
backgroundColor: Color(0xFFFEEDE1),
iconColor: Color(0xFFF76808),
),
],
)
```
### Message Information
```dart theme={null}
ThemeData(
extensions: [
CometChatOutgoingMessageBubbleStyle(
backgroundColor: Color(0xFFF76808),
),
CometChatMessageInformationStyle(
backgroundHighLightColor: Color(0xFFFEEDE1),
messageReceiptStyle: CometChatMessageReceiptStyle(
readIconColor: Color(0xFFF76808),
),
),
],
)
```
### Mentions
```dart theme={null}
ThemeData(
extensions: [
CometChatMentionsStyle(
mentionSelfTextBackgroundColor: Color(0xFFF76808),
mentionTextBackgroundColor: Colors.white,
mentionTextColor: Colors.black,
mentionSelfTextColor: Colors.white,
),
],
)
```
***
## AI Components
### Conversation Starter
```dart theme={null}
CometChatAIConversationStarterStyle(
backgroundColor: Color(0xFFFEEDE1),
border: Border.all(color: Color(0xFFFBBB90)),
)
```
### Smart Replies
```dart theme={null}
CometChatAISmartRepliesStyle(
backgroundColor: Color(0xFFFEEDE1),
titleStyle: TextStyle(color: Color(0xFFF76808)),
itemBackgroundColor: Color(0xFFFFF9F5),
itemBorder: Border.all(color: Color(0xFFFBBB90)),
)
```
### Conversation Summary
```dart theme={null}
CometChatAIConversationSummaryStyle(
backgroundColor: Color(0xFFFEEDE1),
titleStyle: TextStyle(color: Color(0xFFF76808)),
)
```
### AI Option Sheet
```dart theme={null}
CometChatAiOptionSheetStyle(
backgroundColor: Color(0xFFFFF9F5),
iconColor: Color(0xFFF76808),
)
```
### AI Assistant Chat History
```dart theme={null}
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,
),
)
```
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.