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

# Customizing Message Bubbles

> Customize CometChat Flutter UI Kit message bubbles with incoming and outgoing styles, theme extensions, reactions, timestamps, and avatars.

The CometChat V6 UI Kit provides `CometChatOutgoingMessageBubbleStyle` and `CometChatIncomingMessageBubbleStyle` for fine-grained control over message bubble appearance. These classes extend `ThemeExtension`, allowing customizations through global theming or explicit style objects.

## How These Classes Help

### 1. Targeted Customization

Customize specific attributes of message bubbles:

* Background color, border radius, text style
* Specialized bubbles: Audio, File, Collaborative, Poll, Deleted, Link Preview, Sticker, Call bubbles
* Reactions, timestamps, avatars, and borders

### 2. Unified Global Theming

Apply styles via Flutter's global theming or pass them to `CometChatMessageListStyle`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    MaterialApp(
      title: 'Your app',
      theme: ThemeData(
        extensions: [
          CometChatIncomingMessageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
          CometChatOutgoingMessageBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ],
      ),
      home: ...,
    );
    ```
  </Tab>
</Tabs>

### 3. Ease of Integration

Pass styles directly to `CometChatMessageList`:

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMessageList(
      user: user,
      group: group,
      style: CometChatMessageListStyle(
        incomingMessageBubbleStyle: CometChatIncomingMessageBubbleStyle(),
        outgoingMessageBubbleStyle: CometChatOutgoingMessageBubbleStyle(),
      ),
    )
    ```
  </Tab>
</Tabs>

## Customizable Message Bubbles

### Text Bubble

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

### Image Bubble

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

### Video Bubble

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

### Audio Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          audioBubbleStyle: CometChatAudioBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            playIconColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          audioBubbleStyle: CometChatAudioBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            downloadIconColor: Color(0xFFF76808),
            audioBarColor: Color(0xFFF76808),
            playIconColor: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### File Bubble

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

### Sticker Bubble

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

### Call Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          videoCallBubbleStyle: CometChatCallBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconColor: Color(0xFFF76808),
            buttonTextStyle: TextStyle(color: Colors.white),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          videoCallBubbleStyle: CometChatCallBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconColor: Color(0xFFF76808),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Collaborative Whiteboard Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconTint: Color(0xFFFFFFFF),
            titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
            buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          collaborativeWhiteboardBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconTint: Color(0xFFF76808),
            titleStyle: TextStyle(fontWeight: FontWeight.bold),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Collaborative Document Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            iconTint: Color(0xFFFFFFFF),
            titleStyle: TextStyle(fontWeight: FontWeight.bold, color: Color(0xFFFFFFFF)),
            buttonTextStyle: TextStyle(color: Color(0xFFFFFFFF)),
            dividerColor: Color(0xFFFBAA75),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          collaborativeDocumentBubbleStyle: CometChatCollaborativeBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            iconTint: Color(0xFFF76808),
            titleStyle: TextStyle(fontWeight: FontWeight.bold),
            buttonTextStyle: TextStyle(color: Color(0xFFF76808)),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Poll Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          pollsBubbleStyle: CometChatPollsBubbleStyle(
            backgroundColor: Color(0xFFF76808),
            progressBackgroundColor: Color(0xFFFBAA75),
            iconColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          pollsBubbleStyle: CometChatPollsBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
            progressBackgroundColor: Color(0xFFDCDCDC),
            progressColor: Color(0xFFF76808),
            iconColor: Colors.white,
            selectedOptionColor: Color(0xFFF76808),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Link Preview Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatOutgoingMessageBubbleStyle(
          linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
            backgroundColor: Color(0xFFFBAA75),
          ),
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFF76808),
          ),
        ),
        CometChatIncomingMessageBubbleStyle(
          linkPreviewBubbleStyle: CometChatLinkPreviewBubbleStyle(
            backgroundColor: Color(0xFFFBAA75),
          ),
          textBubbleStyle: CometChatTextBubbleStyle(
            backgroundColor: Color(0xFFFEEDE1),
          ),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>

### Action Message Bubble

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

### Deleted Message Bubble

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

### AI Assistant Bubble

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    ThemeData(
      extensions: [
        CometChatAiAssistantBubbleStyle(
          backgroundColor: Colors.transparent,
          textColor: const Color(0xFF141414),
        ),
      ],
    )
    ```
  </Tab>
</Tabs>