# Theming

You can customize the look and feel of all UI components provided by `StreamChatSwiftUI`. The SDK allows you to change the appearance of components such as colors, fonts, and images via the `Appearance` configuration. Changes to appearance should be done when initializing the `StreamChat` object, typically in your `AppDelegate` or at the start of your app lifecycle.

## Brand Color

The most basic customization you can do is to change the brand color. In SwiftUI, you can customize the tint color by setting it in the `ColorPalette` configuration. UI elements will respect this tint color as the main (brand) color throughout the chat interface.

For example, by customizing the tint color in the `Appearance` configuration when creating the `StreamChat` object, you can easily modify the brand color of the whole chat UI:

```swift
let apiKeyString = "your_api_key_string"
let config = ChatClientConfig(apiKey: .init(apiKeyString))
let client = ChatClient(config: config)

let newTintColor = UIColor.systemPink
var colors = ColorPalette()
colors.tintColor = Color(newTintColor)
let appearance = Appearance(colors: colors)

let streamChat = StreamChat(chatClient: client, appearance: appearance)
```

| Before                                                                     | After                                                                   |
| -------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| ![Chat UI with default tint color](@chat-sdk/ios/v4/_assets/blue-tint.png) | ![Chat UI with pink tint color](@chat-sdk/ios/v4/_assets/pink-tint.png) |

## Colors and Fonts

The colors and fonts are part of the `Appearance` configuration type. Since all components have access to this configuration through dependency injection, all components will be impacted by the changes on this configuration.

For example, let's change the color of the messages sent by the current user and the body font. We can do this by modifying the values in the `Appearance` object when initializing `StreamChat`:

```swift
var colors = ColorPalette()
colors.messageCurrentUserBackground = .yellow

var fonts = Fonts()
fonts.body = .italicSystemFont(ofSize: 20)

let appearance = Appearance(colors: colors, fonts: fonts)
let streamChat = StreamChat(chatClient: client, appearance: appearance)
```

| Before                                                                          | After                                                                             |
| ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| ![Messages Default Appearance](@chat-sdk/ios/v4/_assets/default-appearance.png) | ![Messages Adjusted Appearance](@chat-sdk/ios/v4/_assets/adjusted-appearance.png) |

You can see the font and the background color of the message has changed. Also note, that the font in the composer text view is also changed, since it uses the same semantic font as the body of the message.

You can find the full reference of both [`Fonts`](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/Fonts.swift) and [`ColorPalette`](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/ColorPalette.swift) respectively..

## Image Assets

The image assets and icons used by buttons also use the `Appearance` configuration type. For example, let's modify the icon used for the "Send" button:

```swift
let images = Images()
images.sendArrow = UIImage(systemName: "arrowshape.turn.up.right")!

let appearance = Appearance(colors: colors, fonts: fonts, images: images)
let streamChat = StreamChat(chatClient: client, appearance: appearance)
```

| Before                                                                  | After                                                                   |
| ----------------------------------------------------------------------- | ----------------------------------------------------------------------- |
| ![Custom Send Button](@chat-sdk/ios/v4/_assets/default-send-button.png) | ![Default Send Button](@chat-sdk/ios/v4/_assets/custom-send-button.png) |

If the same image is used in multiple places, changing the image in the `Appearance` object will update it in all places.

The full reference of the `Images` object can be found [here](https://github.com/GetStream/stream-chat-swiftui/blob/develop/Sources/StreamChatSwiftUI/Images.swift).

## Data Formatting

Besides customizing the UI appearance, you can also customize the data formatting of the components. For example, you can change how the channel name is displayed or how the timestamp of messages are formatted. For this, you should use the `Utils` object, which is part of the `StreamChat` object.

Below is an example of how to change the channel name and message timestamp formatting.

```swift
let channelNamer: ChatChannelNamer = { channel, currentUserId in
    if let name = channel.name {
        return name
    }
    return channel.lastActiveMembers.joined(separator: ", ")
}
let customDateFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .short
    return formatter
}()
let utils = Utils(
    dateFormatter: customDateFormatter,
    channelNamer: channelNamer
)
let streamChat = StreamChat(
    chatClient: client,
    utils: utils
)
```


---

This page was last updated at 2026-04-17T17:33:37.272Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/ios/v4/swiftui/theming/](https://getstream.io/chat/docs/sdk/ios/v4/swiftui/theming/).