> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Component Styling

> Style CometChat Flutter UI Kit components with ThemeData extensions, component-level style objects, message bubbles, and call UI.

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:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MaterialApp(
      theme: ThemeData(
        extensions: [
          CometChatOutgoingMessageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
          CometChatIncomingMessageBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
          CometChatActionBubbleStyle(
            textStyle: TextStyle(color: Color(0xFFF76808)),
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ],
      ),
      home: YourApp(),
    )
    ```
  </Tab>
</Tabs>

### 2. Component-Level Styles

Pass style objects directly to a component. These override global theme values:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      style: CometChatMessageListStyle(
        backgroundColor: Color(0xFFFEEDE1),
        outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(
          backgroundColor: Color(0xFFF76808),
        ),
        incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(
          backgroundColor: Colors.white,
        ),
      ),
    )
    ```
  </Tab>
</Tabs>

## 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:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    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
      ),
    )
    ```
  </Tab>
</Tabs>

See [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) for per-bubble-type examples.

***

## Component Style Examples

### Conversations

<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

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

### Message Composer

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

### Message Header

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

### Users

<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

<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

<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),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### AI Assistant Chat History

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    final ccColor = CometChatThemeHelper.getColorPalette(context);
    CometChatAIAssistantChatHistory(
      user: user,
      style: CometChatAIAssistantChatHistoryStyle(
        backgroundColor: const Color(0xFFFFFAF6),
        headerBackgroundColor: const Color(0xFFFFFAF6),
        headerTitleTextColor: ccColor.textPrimary,
      ),
    )
    ```
  </Tab>
</Tabs>

***

## Base Component Styles

### Avatar

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

### Status Indicator

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

### Badge

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

### Receipts

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

### Media Recorder

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

### Reactions

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

### Reaction List

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

### Conversation Starter

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

### Conversation Summary

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

### Smart Replies

<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

<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

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

### Attachment Option Sheet

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

### AI Option Sheet

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

### Mentions

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

***

## Related

* [Message Bubble Styling](/ui-kit/flutter/message-bubble-styling) — Per-bubble-type style examples.
* [Color Resources](/ui-kit/flutter/color-resources) — Color palette customization.
* [Theme Introduction](/ui-kit/flutter/theme-introduction) — Theme system overview (ColorPalette, Typography, Spacing).
* [Customization Overview](/ui-kit/flutter/customization-overview) — All customization categories.