> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Elevate Your Chat Experience: Mastering Component Styling In CometChat

## Unlock the Power of Customization

Tired of generic chat interfaces? With CometChat's powerful component styling capabilities, you can now create truly unique and visually stunning chat experiences.

## Transform Your Chat with Component Styling

Component Styling empowers you to fine-tune every aspect of your chat UI, from the subtle nuances of message bubbles to the bold impact of global theme changes. Customize the following key components to match your brand's identity and user preferences:

## Components

### Conversation

Control the overall layout and behavior of conversations.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/FOTukDN54hvEwBMP/images/f8b72fe1-conversation_styling-bd60245f0728731e74244ea8675b582d.png?fit=max&auto=format&n=FOTukDN54hvEwBMP&q=85&s=5c36e33ef95caf22d9ca842a8f31d966" width="2560" height="1600" data-path="images/f8b72fe1-conversation_styling-bd60245f0728731e74244ea8675b582d.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        fontFamily: 'Times New Roman',
        extensions: [
            CometChatConversationsStyle(
                avatarStyle: CometChatAvatarStyle(
                    borderRadius: BorderRadius.circular(8),
                    backgroundColor: Color(0xFFFBAA75)
                ),
                badgeStyle: CometChatBadgeStyle(
                    backgroundColor: Color(0xFFF76808)
                )
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Message List

Customize the appearance of message lists, including bubble styles, timestamps, and reactions.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bhTrlIxYu6hfTewG/images/43be6937-message_list_styling-87dfbbb28ddf18e45d5281c3f23d3722.png?fit=max&auto=format&n=bhTrlIxYu6hfTewG&q=85&s=4f0212f7584e5af7af023fc4fa2ccb11" width="2560" height="1600" data-path="images/43be6937-message_list_styling-87dfbbb28ddf18e45d5281c3f23d3722.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMessageListStyle(
                backgroundColor: Color(0xFFFEEDE1),
                outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
                  backgroundColor: Color(0xFFF76808)
                )
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Message Composer

Tailor the input field and send button to suit your design.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/rr55t_hLoswcBCG0/images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png?fit=max&auto=format&n=rr55t_hLoswcBCG0&q=85&s=ea4392fea30239ac26b9b78f95f5b578" width="2560" height="464" data-path="images/043969b6-message_composer_styling-7a7256fcf47f1835a442e450f03503fe.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMessageComposerStyle(
                sendButtonIconBackgroundColor: Color(0xFFF76808),
                secondaryButtonIconColor: Color(0xFFF76808),
                auxiliaryButtonIconColor: Color(0xFFF76808)
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Message Header

Customize the header displayed at the top of each conversation.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/VNS5mkoJQS_4exaS/images/35210220-message_header_styling-cff387a0c5c3d3138ef3e55a57f82de1.png?fit=max&auto=format&n=VNS5mkoJQS_4exaS&q=85&s=f2c5a99eb1b080e4079a6bfe959bc5cb" width="2560" height="480" data-path="images/35210220-message_header_styling-cff387a0c5c3d3138ef3e55a57f82de1.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMessageHeaderStyle(
                avatarStyle: CometChatAvatarStyle(
                  backgroundColor: Color(0xFFFBAA75),
                  borderRadius: BorderRadius.circular(6.67),
                ),
                callButtonsStyle: CometChatCallButtonsStyle(
                  voiceCallIconColor: Color(0xFFF76808),
                  videoCallIconColor: Color(0xFFF76808),
                ),
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Users

Style user profiles and lists.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/yDKVamMkf61gj3YR/images/e52ab7f6-users_styling-eb50f461911a21f33a5e96e90751deda.png?fit=max&auto=format&n=yDKVamMkf61gj3YR&q=85&s=72eec3860bf420d0d101ad631c433d12" width="2560" height="1600" data-path="images/e52ab7f6-users_styling-eb50f461911a21f33a5e96e90751deda.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatUsersStyle(
                avatarStyle: CometChatAvatarStyle(
                  borderRadius: BorderRadius.circular(8),
                  backgroundColor: Color(0xFFFBAA75),
                ),
                titleTextColor: Color(0xFFF76808),
                separatorColor:  Color(0xFFF76808),
                backgroundColor: Color(0xFFFFF9F5)
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Groups

Customize the appearance of group chats and group information.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/195oxTVcmj5zqz-a/images/c43fe4f4-groups_styling-107ad9e9a3daa796d657515d719c04f6.png?fit=max&auto=format&n=195oxTVcmj5zqz-a&q=85&s=e2fff0ca4be2a32d50c051464dc642ca" width="2560" height="1600" data-path="images/c43fe4f4-groups_styling-107ad9e9a3daa796d657515d719c04f6.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatGroupsStyle(
                avatarStyle: CometChatAvatarStyle(
                  borderRadius: BorderRadius.circular(8),
                  backgroundColor: Color(0xFFFBAA75),
                ),
                titleTextColor: Color(0xFFF76808),
                separatorColor:  Color(0xFFF76808),
                backgroundColor: Color(0xFFFFF9F5)
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Group Members

Elevate your group chat experience with customizable member list styles.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/494NzpIb6o8839I0/images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png?fit=max&auto=format&n=494NzpIb6o8839I0&q=85&s=0d8502f4b348abdd13e46c0026187586" width="2560" height="1600" data-path="images/7dd6eb5e-group_members_styling-b9b1f40be76f7e4137dbd7dc7e10141c.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```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),
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### AI Assistant Chat History

The `CometChatAIAssistantChatHistory` component displays the history of interactions with an AI assistant. It provides a seamless way to view past conversations, ensuring users can easily reference previous AI responses.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/ez24jA9Q57bxQihV/images/flutter_ai_assistant_chat_history_style.png?fit=max&auto=format&n=ez24jA9Q57bxQihV&q=85&s=137cb59b3f83bb1db18b926a73196e73" width="3040" height="1760" data-path="images/flutter_ai_assistant_chat_history_style.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    final ccColor = CometChatThemeHelper.getColorPalette(context);
    CometChatAIAssistantChatHistory(
      user: user, // A user or group object is required to launch this widget.
      style: CometChatAIAssistantChatHistoryStyle(
        backgroundColor: const Color(0xFFFFFAF6),
        headerBackgroundColor: const Color(0xFFFFFAF6),
        headerTitleTextColor: ccColor.textPrimary,
        headerTitleTextStyle: const TextStyle(
          fontFamily: 'TimesNewRoman', // Add this in pubspec.yaml under fonts
        ),
        newChatIconColor: ccColor.iconSecondary,
        newChatTextColor: ccColor.textPrimary,
        newChaTitleStyle: const TextStyle(
          fontFamily: 'TimesNewRoman', // Add this in pubspec.yaml under fonts
        ),
        dateSeparatorStyle: CometChatDateStyle(
          textStyle: const TextStyle(
            fontFamily: 'TimesNewRoman', // Add this in pubspec.yaml under fonts
          ),
          textColor: ccColor.textTertiary,
          backgroundColor: const Color(0xFFFFFAF6),
        ),
        itemTextStyle: const TextStyle(
          fontFamily: 'TimesNewRoman', // Add this in pubspec.yaml under fonts
        ),
        itemTextColor: ccColor.textPrimary,
      ),
    ),
    ```
  </Tab>
</Tabs>

## Base Components

### Avatar

Personalize user avatars with different shapes, sizes, and borders.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/VNS5mkoJQS_4exaS/images/34fe5c4c-avatar_styling-ce4b80c50b2be5408fb0b0f36c08a913.png?fit=max&auto=format&n=VNS5mkoJQS_4exaS&q=85&s=426103b75d9e290d77e4606af43797e9" width="2560" height="480" data-path="images/34fe5c4c-avatar_styling-ce4b80c50b2be5408fb0b0f36c08a913.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAvatarStyle(
                borderRadius: BorderRadius.circular(8),
                backgroundColor: Color(0xFFFBAA75),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Status Indicator

Control the appearance of online/offline indicators.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/6TXEIAn9Prx7161h/images/a14e7d6a-status_indicator_styling-3f378cc8db84ceb56a195b6c48c04d73.png?fit=max&auto=format&n=6TXEIAn9Prx7161h&q=85&s=ad444dcf00148a7c3bf851e705e52478" width="2560" height="480" data-path="images/a14e7d6a-status_indicator_styling-3f378cc8db84ceb56a195b6c48c04d73.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatStatusIndicatorStyle(
              backgroundColor: Color(0xFFFFAB00),
              borderRadius: BorderRadius.circular(2),
            )
        ]
    )
    ```
  </Tab>
</Tabs>

### Badge

Customize badges for unread messages and notifications.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/195oxTVcmj5zqz-a/images/c563528d-badge_styling-6e584135115b0ed02ccc7d6ac11c03ab.png?fit=max&auto=format&n=195oxTVcmj5zqz-a&q=85&s=65c2e1802095b7908548cb2c6c2e23f0" width="2560" height="480" data-path="images/c563528d-badge_styling-6e584135115b0ed02ccc7d6ac11c03ab.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatBadgeStyle(
                borderRadius: BorderRadius.circular(4),
                backgroundColor: Color(0xFFF44649),
              ),
        ]
    )
    ```
  </Tab>
</Tabs>

### Date

Format and style timestamps.

### Receipts

Customize the appearance of message receipts (e.g., "Seen," "Delivered").

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/KtMgt-R-YUJVVdNY/images/ddb4abba-receipt_styling-c119505832202169fe30108a4b406d22.png?fit=max&auto=format&n=KtMgt-R-YUJVVdNY&q=85&s=cbc29fb11739da8a7a654742063d49af" width="2560" height="480" data-path="images/ddb4abba-receipt_styling-c119505832202169fe30108a4b406d22.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMessageReceiptStyle(
                readIconColor:  Color(0xFFFFAB00),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Media Recorder

Style the audio and video recording interfaces.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/rwhg7oJFLB4eAI7-/images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png?fit=max&auto=format&n=rwhg7oJFLB4eAI7-&q=85&s=8e5fdd0296a8b888fb511c82be5d5ebb" width="2560" height="1680" data-path="images/49938d8d-media_recorder_styling-fa79c9f0c778829f84dc3f69ed3a96a7.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMediaRecorderStyle(
                recordIndicatorBackgroundColor: Color(0xFFF44649),
                recordIndicatorBorderRadius: BorderRadius.circular(20),
                pauseButtonBorderRadius: BorderRadius.circular(8),
                deleteButtonBorderRadius: BorderRadius.circular(8),
                stopButtonBorderRadius: BorderRadius.circular(8),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Sticker Keyboard

Customize the appearance of sticker keyboards.

### Reactions

Style the appearance of reactions to messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/369-zORU2xFUjQ28/images/8603fdc6-reactions-9e89534b60dda1a813a2c22f4053b042.png?fit=max&auto=format&n=369-zORU2xFUjQ28&q=85&s=c7feae6224e2a19088d2960ea2ec22d4" width="2560" height="800" data-path="images/8603fdc6-reactions-9e89534b60dda1a813a2c22f4053b042.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
             CometChatReactionsStyle(
                borderRadius: BorderRadius.circular(8),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Reaction List

Control the style of reactions displayed on messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/skyYyiTRS367pk0g/images/8cc1f30f-reaction_list_styling-7f5a6d0d1bced54dede5482fcffdd461.png?fit=max&auto=format&n=skyYyiTRS367pk0g&q=85&s=804eb855f473a89d5fada98336c86dc6" width="2560" height="1680" data-path="images/8cc1f30f-reaction_list_styling-7f5a6d0d1bced54dede5482fcffdd461.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatReactionListStyle(
                activeTabTextColor: Color(0xFFF76808),
                activeTabIndicatorColor: Color(0xFFF76808),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Conversation Starter

Tailor the initial message or prompt.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/-VkygUOl1ts-0wu1/images/b101b8c0-conversation_starter_styling-b9c86101e742319c7d009f783447aefe.png?fit=max&auto=format&n=-VkygUOl1ts-0wu1&q=85&s=87eea788eb24fec9c349dfccec801f84" width="2560" height="1680" data-path="images/b101b8c0-conversation_starter_styling-b9c86101e742319c7d009f783447aefe.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAIConversationStarterStyle(
                backgroundColor: Color(0xFFFEEDE1),
                border: Border.all(color: Color(0xFFFBBB90)),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Conversation Summary

Customize the summary view of a conversation.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/V0K7cPlfehMN11ku/images/2b3e747d-conversation_summary_styling-49d38ee5597cf47bfda0f311bbf9b695.png?fit=max&auto=format&n=V0K7cPlfehMN11ku&q=85&s=c2c73f723ec30edd793ee441d469c3ee" width="2560" height="1680" data-path="images/2b3e747d-conversation_summary_styling-49d38ee5597cf47bfda0f311bbf9b695.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAIConversationSummaryStyle(
                backgroundColor: Color(0xFFFEEDE1),
                titleStyle: TextStyle(
                  color: Color(0xFFF76808),
                ),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Smart Replies

Style the appearance of suggested replies.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/h4jICZGdYoXE6-Y1/images/130759e8-smart_replies_styling-867bc2eb5ffd9c60ea0b93e5170c765a.png?fit=max&auto=format&n=h4jICZGdYoXE6-Y1&q=85&s=c9d52440c7869d5477e9d1beff313891" width="2560" height="1680" data-path="images/130759e8-smart_replies_styling-867bc2eb5ffd9c60ea0b93e5170c765a.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAISmartRepliesStyle(
                backgroundColor: Color(0xFFFEEDE1),
                titleStyle: TextStyle(
                  color: Color(0xFFF76808),
                ),
                itemBackgroundColor: Color(0xFFFFF9F5),
                itemBorder: Border.all(color: Color(0xFFFBBB90)),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Message Information

Customize the information displayed when tapping on a message.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/Jekl0sHaq-tRog2V/images/57c7a382-message_information_styling-91b10e77a9fbc7f2474f00370c721896.png?fit=max&auto=format&n=Jekl0sHaq-tRog2V&q=85&s=9e4e74d8dc8eb751118e9f45961ad1d5" width="2560" height="1680" data-path="images/57c7a382-message_information_styling-91b10e77a9fbc7f2474f00370c721896.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
            fontFamily: "Times New Roman",
            extensions: [
              CometChatOutgoingMessageBubbleStyle(
                  backgroundColor: Color(0xFFF76808)
              ),
              CometChatMessageInformationStyle(
                backgroundHighLightColor: Color(0xFFFEEDE1),
                messageReceiptStyle: CometChatMessageReceiptStyle(
                  readIconColor: Color(0xFFF76808)
                )
              ),
            ]
          )
    ```
  </Tab>
</Tabs>

### Message Option Sheet

Style the options menu for individual messages.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/IOPdWrN4_rrt5FC1/images/f37fce1d-message_optionsheet_styling-54b65d0a347af98389d78d0be997c521.png?fit=max&auto=format&n=IOPdWrN4_rrt5FC1&q=85&s=b9a2af56184a65275495e909d428fd2b" width="2560" height="1680" data-path="images/f37fce1d-message_optionsheet_styling-54b65d0a347af98389d78d0be997c521.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMessageOptionSheetStyle(
                backgroundColor: Color(0xFFFEEDE1),
                iconColor: Color(0xFFF76808),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Attachment Option Sheet

Customize the attachment options menu.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/why4qwLRU92tDIid/images/79cda8c6-attachment_option_styling-a0efa5925c46a6bb0cc5a015c7af96d8.png?fit=max&auto=format&n=why4qwLRU92tDIid&q=85&s=c48debdd31d6c6f8c09eeb3ace966857" width="2560" height="1680" data-path="images/79cda8c6-attachment_option_styling-a0efa5925c46a6bb0cc5a015c7af96d8.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAttachmentOptionSheetStyle(
                backgroundColor: Color(0xFFFEEDE1),
                iconColor: Color(0xFFF76808),
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### AI Option Sheet

Style the all-in-one options menu.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/bhTrlIxYu6hfTewG/images/4354227d-ai_option_sheet_styling-2ce2eed6c11da7df00c1c8a998c2a612.png?fit=max&auto=format&n=bhTrlIxYu6hfTewG&q=85&s=00d977a47052549c174fa9acc2a0ae8c" width="2560" height="1680" data-path="images/4354227d-ai_option_sheet_styling-2ce2eed6c11da7df00c1c8a998c2a612.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatAiOptionSheetStyle(
                backgroundColor: Color(0xFFFFF9F5),
                iconColor: Color(0xFFF76808)
              )
        ]
    )
    ```
  </Tab>
</Tabs>

### Mentions

Customize the appearance of user and group mentions.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-feature-react-native-sdk-quotedmessage-a/IROXeajQRcMWx2uk/images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png?fit=max&auto=format&n=IROXeajQRcMWx2uk&q=85&s=d9f354603fa1ec3856796d4bca05112b" width="2560" height="1680" data-path="images/74b20b0e-mentions_styling-8e36e26282f4facd7920dc23ca98b832.png" />
</Frame>

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
        extensions: [
            CometChatMentionsStyle(
                mentionSelfTextBackgroundColor: Color(0xFFF76808),
                mentionTextBackgroundColor: Colors.white,
                mentionTextColor: Colors.black,
                mentionSelfTextColor: Colors.white,
              )
        ]
    )
    ```
  </Tab>
</Tabs>