> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Introduction

> Overview of the CometChat iOS UI Kit theming system including CometChatTheme for global colors, typography, spacing, and component-specific style customization.

<Info>
  **Quick Reference for AI Agents & Developers**

  * **Theme class:** `CometChatTheme`
  * **Import:** `import CometChatUIKitSwift`
  * **Colors:** `CometChatTheme.primaryColor`, `CometChatTheme.backgroundColor01`, etc.
  * **Typography:** `CometChatTypography.Heading1.bold`, `CometChatTypography.Body.regular`, etc.
  * **Spacing:** `CometChatSpacing.Padding.p1`, `CometChatSpacing.Radius.r2`, etc.
  * **Related:** [Color Resources](/ui-kit/ios/color-resources) · [Component Styling](/ui-kit/ios/component-styling) · [Message Bubble Styling](/ui-kit/ios/message-bubble-styling)
</Info>

## Overview

Theming in CometChat for iOS allows you to create visually consistent and customizable user interfaces that align with your application's branding. The CometChatTheme system enables global theming, customization of colors, typography, spacing, and component-specific styles to enhance the user experience across all CometChat components.

With global styles and an easy-to-override architecture, you can seamlessly apply themes at both a global and component level.

## Using Theming in Your Project

Global Theming

Set up the global theme for your application during the app launch. This ensures all CometChat components use the specified theme.

Example in AppDelegate.swift

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

    @main
    class AppDelegate: UIResponder, UIApplicationDelegate {
        var window: UIWindow?

        func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
            
            // Apply the global theme
            CometChatTheme.primaryColor = UIColor.systemBackground
            
            // Apply custom typography
            CometChatTypography.Body.regular = UIFont.systemFont(ofSize: 18, weight: .bold)
            
            return true
        }
    }
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/YvsuHK9OUJHB_mlJ/images/50251410-conversations-3f0ef3f28c52cc9c3b9306db1652a4de.png?fit=max&auto=format&n=YvsuHK9OUJHB_mlJ&q=85&s=444610788370bb2c3fc27c4e2525cf14" width="1440" height="833" data-path="images/50251410-conversations-3f0ef3f28c52cc9c3b9306db1652a4de.png" />
</Frame>

## Customization

Customizing Colors

Override specific color attributes globally in CometChatTheme. This is equivalent to overriding attributes in Android's themes.xml.

Example: Setting Primary Color

<Tabs>
  <Tab title="Swift">
    ```swift theme={null}
    CometChatTheme.primaryColor = UIColor(hex: "#F76808") // Custom primary color
    ```
  </Tab>
</Tabs>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-ios-ui-kit-sdk-fixes/OIUJPqkRTDwLak2K/images/42fec91c-conversation-theme-7af3cbbe9848a8208c155c3e061c90bc.png?fit=max&auto=format&n=OIUJPqkRTDwLak2K&q=85&s=ebdd112a5648c3e97732cd4bd4031642" width="1440" height="833" data-path="images/42fec91c-conversation-theme-7af3cbbe9848a8208c155c3e061c90bc.png" />
</Frame>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Color Resources" icon="palette" href="/ui-kit/ios/color-resources">
    Customize colors for light and dark mode
  </Card>

  <Card title="Component Styling" icon="paintbrush" href="/ui-kit/ios/component-styling">
    Style individual UI components
  </Card>

  <Card title="Message Bubble Styling" icon="comment-dots" href="/ui-kit/ios/message-bubble-styling">
    Customize message bubble appearance
  </Card>

  <Card title="Localize" icon="globe" href="/ui-kit/ios/localize">
    Language localization and date formatting
  </Card>
</CardGroup>