Theming

You can customize the look and feel of all UI components provided by StreamChatUI. The SDK allows you to change the appearance of components such as colors and fonts via the Appearance configuration. Changes to appearance should be done as early as possible in your application lifecycle, the SceneDelegate and AppDelegate are usually the right places to do this. The SDK comes with a singleton object Appearance.default that you can use directly to make changes.

Changing Brand Color

The most basic customization you can do is to change the brand color, and for this one you don’t really need the Stream’s Appearance configuration, you only need to change the tint color of the UIWindow. If suitable, UI elements respect UIView.tintColor as the main (brand) color. The current tintColor depends on the tint color of the view hierarchy the UI element is presented on.

For example, by changing the tint color of the UIWindow of the app, you can easily modify the brand color of the whole chat UI:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = scene as? UIWindowScene else { return }

        scene.windows.forEach {
          $0.tintColor = .systemPink
        }
    }
}

Before	After

Changing Colors and Fonts

The colors and fonts are part of the Appearance configuration type. Since all components have access to this configuration, 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 simply modifying the values from Appearance.default as early as possible in your application life-cycle:

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        ...
        Appearance.default.fonts.body = .italicSystemFont(ofSize: 20)
        Appearance.default.colorPalette.background6 = .yellow
        ...
    }
}

Before	After

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.

Changing 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:

Appearance.default.images.sendArrow = UIImage(systemName: "arrowshape.turn.up.right")!

Before	After

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

Properties

Appearance style properties are organized in four groups:

colorPalette

A color palette to provide basic set of colors for all UI components. The full reference can be found here.

fonts

The set of fonts used by UI components. The full reference can be found here.

images

The set of images used by UI components. The full reference can be found here.

formatters

The set of formatters used by UI components. Please refer to here for additional information.