Component Styling - CometChat Docs

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

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:

Swift

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

Instance Styling

Apply to a specific component instance:

Swift

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

Component Styles

Conversations

Swift

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

View all ConversationsStyle properties →

Users

Swift

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

View all UsersStyle properties →

Groups

Swift

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

View all GroupsStyle properties →

Message Header

Swift

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

View all MessageHeaderStyle properties →

Message List

Swift

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)

View all MessageListStyle properties →

Message Composer

Swift

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

View all MessageComposerStyle properties →

Call Logs

Swift

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

View all CallLogStyle properties →

Search

Swift

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

AI Assistant Chat History

Swift

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

Base Component Styles

Avatar

Swift

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

View AvatarStyle →

Badge

Swift

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

View BadgeStyle →

Status Indicator

Swift

let statusStyle = StatusIndicatorStyle()
statusStyle.backgroundColor = .systemGreen  // Online color
statusStyle.borderColor = .white
statusStyle.borderWidth = 2
statusStyle.cornerRadius = CometChatCornerStyle(cornerRadius: 6)  // Circle

View StatusIndicatorStyle →

Receipt

Swift

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

View ReceiptStyle →

Complete Styling Example

Apply consistent branding across all components:

Swift

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

Color Resources

Theme colors

Theme Introduction

Complete theming

Components Overview

All components

​Overview

​Styling Methods

​Global Styling

​Instance Styling

​Component Styles

​Conversations

​Users

​Groups

​Message Header

​Message List

​Message Composer

​Call Logs

​Search

​AI Assistant Chat History

​Base Component Styles

​Avatar

​Badge

​Status Indicator

​Receipt

​Complete Styling Example

​Related