Component Styling

Complete guide to styling CometChat iOS UI Kit components - colors, fonts, and custom appearances

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)
CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = UIColor(hex: "#F76808")
CometChatMessageList.messageBubbleStyle.outgoing.textColor = .white
CometChatMessageList.messageBubbleStyle.outgoing.textFont = UIFont.systemFont(ofSize: 15)

// Incoming message bubbles (other's messages)
CometChatMessageList.messageBubbleStyle.incoming.backgroundColor = UIColor(hex: "#E8E8E8")
CometChatMessageList.messageBubbleStyle.incoming.textColor = UIColor(hex: "#212121")
CometChatMessageList.messageBubbleStyle.incoming.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
        CometChatMessageList.messageBubbleStyle.outgoing.backgroundColor = primaryColor
        CometChatMessageList.messageBubbleStyle.outgoing.textColor = .white
        CometChatMessageList.messageBubbleStyle.incoming.backgroundColor = .white
        CometChatMessageList.messageBubbleStyle.incoming.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
    }
}

---

Troubleshooting

Problem	Solution
Styles not applying	Apply global styles before CometChatUIKit.init()
Instance style overridden	Instance styles take precedence over global
Colors look wrong in dark mode	Use dynamic colors with UIColor { traitCollection in }
Font not loading	Verify font name is correct and font is added to project

---

Related

• Color Resources - Theme colors
• Theme Introduction - Complete theming
• Components Overview - All components