> ## 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 iOS UI Kit components globally or per instance with style classes, base styles, colors, fonts, and custom appearances.

<Accordion title="AI Integration Quick Reference">
  | Field            | Value                                                                       |
  | ---------------- | --------------------------------------------------------------------------- |
  | Platform         | iOS UI Kit                                                                  |
  | Global Styling   | `CometChatConversations.style.titleColor = UIColor`                         |
  | Instance Styling | `let style = ConversationsStyle(); conversations.style = style`             |
  | Style Classes    | `ConversationsStyle`, `UsersStyle`, `GroupsStyle`, `MessageListStyle`, etc. |
  | Base Styles      | `AvatarStyle`, `BadgeStyle`, `StatusIndicatorStyle`, `ReceiptStyle`         |
  | Apply Timing     | Global styles before `CometChatUIKit.init()`                                |
  | Precedence       | Instance styles override global styles                                      |
</Accordion>

## Overview

Every CometChat component can be styled to match your app's design. You can apply styles globally (affects all instances) or per-instance (affects one component).

***

## Styling Methods

### Global Styling

Apply once, affects all instances of a component:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Set before using any components (e.g., in AppDelegate)
    CometChatConversations.style.titleColor = UIColor(hex: "#6200EE")
    CometChatConversations.style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
    CometChatConversations.style.backgroundColor = .systemBackground
    ```
  </Tab>
</Tabs>

### Instance Styling

Apply to a specific component instance:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    let style = ConversationsStyle()
    style.titleColor = UIColor(hex: "#6200EE")
    style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
    style.backgroundColor = .systemBackground

    let conversations = CometChatConversations()
    conversations.style = style
    ```
  </Tab>
</Tabs>

***

## Component Styles

### Conversations

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/7emVxEQ5MCxvzC60/images/1f71c314-Conversation20-20Styling-0828b09802274067ea4d10f601f24626.png?fit=max&auto=format&n=7emVxEQ5MCxvzC60&q=85&s=fd4b68bc947cc15180a23e4aa6a15438" width="1280" height="800" data-path="images/1f71c314-Conversation20-20Styling-0828b09802274067ea4d10f601f24626.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Create custom styles
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

    let badgeStyle = BadgeStyle()
    badgeStyle.backgroundColor = UIColor(hex: "#F76808")
    badgeStyle.textColor = .white
    badgeStyle.textFont = UIFont.systemFont(ofSize: 12, weight: .bold)

    let receiptStyle = ReceiptStyle()
    receiptStyle.readIconTint = UIColor(hex: "#6200EE")
    receiptStyle.deliveredIconTint = UIColor(hex: "#9E9E9E")

    // Apply to conversations
    let conversations = CometChatConversations()
    conversations.avatarStyle = avatarStyle
    conversations.badgeStyle = badgeStyle
    conversations.receiptStyle = receiptStyle

    // Style the list
    conversations.style.titleColor = UIColor(hex: "#212121")
    conversations.style.titleFont = UIFont.systemFont(ofSize: 17, weight: .semibold)
    conversations.style.subtitleColor = UIColor(hex: "#757575")
    conversations.style.subtitleFont = UIFont.systemFont(ofSize: 14)
    conversations.style.backgroundColor = .systemBackground
    conversations.style.listItemBackground = .systemBackground
    ```
  </Tab>
</Tabs>

[View all ConversationsStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Conversations/ConversationsStyle.swift)

***

### Users

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/PaxBG9I1yMoeQmt2/images/369f2563-users-styling-ad9cd93f76d5d1b5062c1bb585a8ef4a.png?fit=max&auto=format&n=PaxBG9I1yMoeQmt2&q=85&s=1101e0ee6fb602b3156065cc39538b8f" width="1280" height="800" data-path="images/369f2563-users-styling-ad9cd93f76d5d1b5062c1bb585a8ef4a.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Avatar style
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

    // Status indicator style
    let statusStyle = StatusIndicatorStyle()
    statusStyle.backgroundColor = .systemGreen
    statusStyle.borderColor = .white
    statusStyle.borderWidth = 2

    // Apply styles
    let users = CometChatUsers()
    users.avatarStyle = avatarStyle
    users.statusIndicatorStyle = statusStyle

    // List styling
    users.style.titleColor = UIColor(hex: "#F76808")
    users.style.titleFont = UIFont(name: "Helvetica-Bold", size: 28)
    users.style.listItemTitleColor = UIColor(hex: "#212121")
    users.style.listItemTitleFont = UIFont.systemFont(ofSize: 16, weight: .medium)
    users.style.backgroundColor = .systemBackground
    ```
  </Tab>
</Tabs>

[View all UsersStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Users/UsersStyle.swift)

***

### Groups

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/NN4EdpOU3viwWMb_/images/0c6299fe-groups-styling-a73d99b6006987d2582f64e9bd67fc36.png?fit=max&auto=format&n=NN4EdpOU3viwWMb_&q=85&s=ba4000d14cdae1e595ce80a92ab74618" width="1280" height="800" data-path="images/0c6299fe-groups-styling-a73d99b6006987d2582f64e9bd67fc36.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Avatar style for group icons
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

    // Apply styles
    let groups = CometChatGroups()
    groups.avatarStyle = avatarStyle

    // List styling
    groups.style.titleColor = UIColor(hex: "#F76808")
    groups.style.titleFont = UIFont(name: "Helvetica-Bold", size: 28)
    groups.style.listItemTitleColor = UIColor(hex: "#212121")
    groups.style.listItemSubtitleColor = UIColor(hex: "#757575")
    groups.style.backgroundColor = .systemBackground
    ```
  </Tab>
</Tabs>

[View all GroupsStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Groups/GroupsStyle.swift)

***

### Message Header

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/le8ibYc8lBJsShSE/images/50f3d03c-Message20Header20-20Styling-6cb76bf4195a8f0ac2278adc8eb77327.png?fit=max&auto=format&n=le8ibYc8lBJsShSE&q=85&s=995b6f3b360a698994239082e5a4a1dd" width="1280" height="240" data-path="images/50f3d03c-Message20Header20-20Styling-6cb76bf4195a8f0ac2278adc8eb77327.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Avatar style
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)

    // Apply to message header
    CometChatMessageHeader.style.titleTextColor = UIColor(hex: "#F76808")
    CometChatMessageHeader.style.titleTextFont = UIFont(name: "Helvetica-Bold", size: 18)
    CometChatMessageHeader.style.subtitleTextColor = UIColor(hex: "#757575")
    CometChatMessageHeader.style.backgroundColor = .systemBackground
    CometChatMessageHeader.avatarStyle = avatarStyle
    ```
  </Tab>
</Tabs>

[View all MessageHeaderStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Header/MessageHeaderStyle.swift)

***

### Message List

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Xgdtn9VZPDi47bm-/images/2861480e-message-list-styling-25635b75554376a8c9ed3664cf61e44c.png?fit=max&auto=format&n=Xgdtn9VZPDi47bm-&q=85&s=58d169f57c0078512ed838691823e7ef" width="1280" height="800" data-path="images/2861480e-message-list-styling-25635b75554376a8c9ed3664cf61e44c.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Background color
    CometChatMessageList.style.backgroundColor = UIColor(hex: "#FBAA75")

    // Outgoing message bubbles (your messages)
    CometChatMessageBubble.style.outgoing.backgroundColor = UIColor(hex: "#F76808")
    CometChatMessageBubble.style.outgoing.textBubbleStyle.textColor = .white
    CometChatMessageBubble.style.outgoing.textBubbleStyle.textFont = UIFont.systemFont(ofSize: 15)

    // Incoming message bubbles (other's messages)
    CometChatMessageBubble.style.incoming.backgroundColor = UIColor(hex: "#E8E8E8")
    CometChatMessageBubble.style.incoming.textBubbleStyle.textColor = UIColor(hex: "#212121")
    CometChatMessageBubble.style.incoming.textBubbleStyle.textFont = UIFont.systemFont(ofSize: 15)

    // Timestamp style
    CometChatMessageList.style.timestampTextColor = UIColor(hex: "#9E9E9E")
    CometChatMessageList.style.timestampTextFont = UIFont.systemFont(ofSize: 11)
    ```
  </Tab>
</Tabs>

[View all MessageListStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20List/MessageListStyle.swift)

***

### Message Composer

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/k0f_g7UwNe_JINeP/images/421a6171-Message20Composer20-20Styling-5ac0eb3ca7a4c8be0d2e5c2af692e2bf.png?fit=max&auto=format&n=k0f_g7UwNe_JINeP&q=85&s=366f737fd8034d86065ba54a392516c8" width="1280" height="232" data-path="images/421a6171-Message20Composer20-20Styling-5ac0eb3ca7a4c8be0d2e5c2af692e2bf.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Send button
    CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = UIColor(hex: "#F76808")
    CometChatMessageComposer.style.sendButtonImageTint = .white

    // Action icons
    CometChatMessageComposer.style.attachmentImageTint = UIColor(hex: "#F76808")
    CometChatMessageComposer.style.voiceRecordingImageTint = UIColor(hex: "#F76808")
    CometChatMessageComposer.style.stickerTint = UIColor(hex: "#F76808")
    CometChatMessageComposer.style.aiImageTint = UIColor(hex: "#F76808")

    // Input field
    CometChatMessageComposer.style.inputBackgroundColor = UIColor(hex: "#F5F5F5")
    CometChatMessageComposer.style.inputTextColor = UIColor(hex: "#212121")
    CometChatMessageComposer.style.inputTextFont = UIFont.systemFont(ofSize: 16)
    CometChatMessageComposer.style.placeholderTextColor = UIColor(hex: "#9E9E9E")

    // Background
    CometChatMessageComposer.style.backgroundColor = .systemBackground
    CometChatMessageComposer.style.borderColor = UIColor(hex: "#E8E8E8")
    ```
  </Tab>
</Tabs>

[View all MessageComposerStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Message%20Composer/MessageComposerStyle.swift)

***

### Call Logs

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/Gp90C5sdVtuRR4t7/images/7f83efe0-call-log-styling-794521d17295b99fa138b51c911f0d3f.png?fit=max&auto=format&n=Gp90C5sdVtuRR4t7&q=85&s=5539ac1f0ad0f65ae318acb51c6d1db8" width="1280" height="800" data-path="images/7f83efe0-call-log-styling-794521d17295b99fa138b51c911f0d3f.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Avatar style
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#FBAA75")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 8)

    // Apply styles
    CometChatCallLogs.style.titleColor = UIColor(hex: "#F76808")
    CometChatCallLogs.style.titleFont = UIFont(name: "Helvetica-Bold", size: 24)
    CometChatCallLogs.style.listItemTitleTextColor = UIColor(hex: "#212121")
    CometChatCallLogs.style.listItemSubTitleTextColor = UIColor(hex: "#757575")
    CometChatCallLogs.style.backgroundColor = .systemBackground

    // Call type icons
    CometChatCallLogs.style.incomingCallIconTint = .systemRed
    CometChatCallLogs.style.outgoingCallIconTint = .systemGreen
    CometChatCallLogs.style.missedCallTitleColor = .systemRed

    CometChatCallLogs.avatarStyle = avatarStyle
    ```
  </Tab>
</Tabs>

[View all CallLogStyle properties →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Calls/Call%20Log/Call%20Logs/CallLogStyle.swift)

***

### Search

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-rn-guide-message-privately/21UBnagXOw-XG0Sv/images/android-search-style.png?fit=max&auto=format&n=21UBnagXOw-XG0Sv&q=85&s=c8188222ee4e7b37276621d5d7830e73" width="2560" height="1670" data-path="images/android-search-style.png" />
</Frame>

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Instance styling
    let style = SearchStyle()
    style.backgroundColor = UIColor(hex: "#EDEAFA")
    style.listItemBackground = UIColor(hex: "#EDEAFA")
    style.listItemTitleFont = UIFont(name: "Helvetica", size: 16)
    style.titleFont = UIFont(name: "Helvetica-Bold", size: 12)
    style.searchBarPlaceholderTextFont = UIFont(name: "Helvetica", size: 12)
    style.searchBarBackgroundColor = .white
    style.searchBarTextColor = UIColor(hex: "#212121")

    let searchVC = CometChatSearch()
    searchVC.style = style

    // Or global styling
    CometChatSearch.style.backgroundColor = UIColor(hex: "#EDEAFA")
    CometChatSearch.style.listItemBackground = UIColor(hex: "#EDEAFA")
    ```
  </Tab>
</Tabs>

***

### AI Assistant Chat History

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift

    // Date separator style
    let dateStyle = CometChatDateStyle()
    dateStyle.textColor = UIColor(hex: "#8E8E93")
    dateStyle.textFont = UIFont.systemFont(ofSize: 12)

    // Apply styles
    CometChatAIAssistantChatHistory.style.backgroundColor = UIColor(hex: "#FFF9F2")
    CometChatAIAssistantChatHistory.style.headerBackgroundColor = UIColor(hex: "#FFF9F2")
    CometChatAIAssistantChatHistory.style.headerTitleTextColor = UIColor(hex: "#141414")
    CometChatAIAssistantChatHistory.style.headerTitleTextFont = UIFont.boldSystemFont(ofSize: 18)
    CometChatAIAssistantChatHistory.style.newChatIconColor = UIColor(hex: "#F76808")
    CometChatAIAssistantChatHistory.style.itemTextColor = UIColor(hex: "#141414")
    CometChatAIAssistantChatHistory.style.itemTextFont = UIFont.systemFont(ofSize: 14)
    CometChatAIAssistantChatHistory.style.dateSeparatorStyle = dateStyle
    ```
  </Tab>
</Tabs>

***

## Base Component Styles

### Avatar

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    let avatarStyle = AvatarStyle()
    avatarStyle.backgroundColor = UIColor(hex: "#6200EE")
    avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 24)  // Circle
    avatarStyle.borderWidth = 2
    avatarStyle.borderColor = .white
    avatarStyle.textFont = UIFont.systemFont(ofSize: 16, weight: .bold)
    avatarStyle.textColor = .white
    ```
  </Tab>
</Tabs>

[View AvatarStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Avatar/AvatarStyle.swift)

### Badge

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    let badgeStyle = BadgeStyle()
    badgeStyle.backgroundColor = UIColor(hex: "#F44336")
    badgeStyle.textColor = .white
    badgeStyle.textFont = UIFont.systemFont(ofSize: 12, weight: .bold)
    badgeStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 10)
    badgeStyle.borderWidth = 0
    ```
  </Tab>
</Tabs>

[View BadgeStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Badge/BadgeCountStyle.swift)

### Status Indicator

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    let statusStyle = StatusIndicatorStyle()
    statusStyle.backgroundColor = .systemGreen  // Online color
    statusStyle.borderColor = .white
    statusStyle.borderWidth = 2
    statusStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 6)  // Circle
    ```
  </Tab>
</Tabs>

[View StatusIndicatorStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Status%20Indicator/StatusIndicatorStyle.swift)

### Receipt

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    let receiptStyle = ReceiptStyle()
    receiptStyle.sentIconTint = UIColor(hex: "#9E9E9E")
    receiptStyle.deliveredIconTint = UIColor(hex: "#9E9E9E")
    receiptStyle.readIconTint = UIColor(hex: "#6200EE")
    receiptStyle.errorIconTint = UIColor(hex: "#F44336")
    ```
  </Tab>
</Tabs>

[View ReceiptStyle →](https://github.com/cometchat/cometchat-uikit-ios/blob/v5/CometChatUIKitSwift/Components/Shared/Views/Receipt/ReceiptStyle.swift)

***

## Complete Styling Example

Apply consistent branding across all components:

<Tabs>
  <Tab title="Swift">
    ```swift lines theme={null}
    import CometChatUIKitSwift
    import UIKit

    class StyleManager {
        
        // Brand colors
        static let primaryColor = UIColor(hex: "#6200EE")
        static let secondaryColor = UIColor(hex: "#03DAC6")
        static let backgroundColor = UIColor.systemBackground
        static let surfaceColor = UIColor(hex: "#F5F5F5")
        static let textPrimary = UIColor(hex: "#212121")
        static let textSecondary = UIColor(hex: "#757575")
        
        static func applyGlobalStyles() {
            // Theme colors
            CometChatTheme.primaryColor = primaryColor
            
            // Avatar style (used everywhere)
            let avatarStyle = AvatarStyle()
            avatarStyle.backgroundColor = secondaryColor
            avatarStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 20)
            
            // Badge style
            let badgeStyle = BadgeStyle()
            badgeStyle.backgroundColor = primaryColor
            badgeStyle.textColor = .white
            
            // Apply to Conversations
            CometChatConversations.avatarStyle = avatarStyle
            CometChatConversations.badgeStyle = badgeStyle
            CometChatConversations.style.titleColor = textPrimary
            CometChatConversations.style.titleFont = UIFont.systemFont(ofSize: 28, weight: .bold)
            CometChatConversations.style.backgroundColor = backgroundColor
            
            // Apply to Users
            CometChatUsers.avatarStyle = avatarStyle
            CometChatUsers.style.titleColor = textPrimary
            CometChatUsers.style.backgroundColor = backgroundColor
            
            // Apply to Groups
            CometChatGroups.avatarStyle = avatarStyle
            CometChatGroups.style.titleColor = textPrimary
            CometChatGroups.style.backgroundColor = backgroundColor
            
            // Apply to Message Header
            CometChatMessageHeader.avatarStyle = avatarStyle
            CometChatMessageHeader.style.titleTextColor = textPrimary
            CometChatMessageHeader.style.backgroundColor = backgroundColor
            
            // Apply to Message List
            CometChatMessageList.style.backgroundColor = surfaceColor
            CometChatMessageBubble.style.outgoing.backgroundColor = primaryColor
            CometChatMessageBubble.style.outgoing.textBubbleStyle.textColor = .white
            CometChatMessageBubble.style.incoming.backgroundColor = .white
            CometChatMessageBubble.style.incoming.textBubbleStyle.textColor = textPrimary
            
            // Apply to Message Composer
            CometChatMessageComposer.style.activeSendButtonImageBackgroundColor = primaryColor
            CometChatMessageComposer.style.attachmentImageTint = primaryColor
            CometChatMessageComposer.style.backgroundColor = backgroundColor
            
            // Apply to Call Logs
            CometChatCallLogs.avatarStyle = avatarStyle
            CometChatCallLogs.style.titleColor = textPrimary
            CometChatCallLogs.style.backgroundColor = backgroundColor
        }
    }

    // Apply in AppDelegate
    @main
    class AppDelegate: UIResponder, UIApplicationDelegate {
        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            StyleManager.applyGlobalStyles()
            return true
        }
    }
    ```
  </Tab>
</Tabs>

***

## Related

<CardGroup cols={3}>
  <Card title="Color Resources" href="/ui-kit/ios/color-resources">
    Theme colors
  </Card>

  <Card title="Theme Introduction" href="/ui-kit/ios/theme-introduction">
    Complete theming
  </Card>

  <Card title="Components Overview" href="/ui-kit/ios/components-overview">
    All components
  </Card>
</CardGroup>