Skip to main content

Theming

You can customize the look and feel of all UI components provided by LikeMindsChat. The SDK allows you to change the appearance of components such as colors, fonts, and image assets through the Appearance configuration. Changes to appearance should be done as early as possible in your application lifecycle, typically in the SceneDelegate or AppDelegate. The SDK comes with a singleton object Appearance.shared that you can use directly to make changes.

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 changes to this configuration.

In the following example, we are changing the background color of the chat UI and the font used for chat messages:

class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        ...
        Appearance.shared.colors.backgroundColor = .lightGray
        Appearance.shared.fonts.messageFont = .systemFont(ofSize: 14, weight: .regular)
        ...

        return true
    }
}

The full list of customizations exposed by Appearance is available in the source files:

Changing Image Assets​

The image assets and icons used by buttons are managed through the Constants configuration type. Since all components have access to this configuration, all components will be impacted by changes to this configuration. For example, let's modify the icon used for the "attachment" button:

class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        ...
        Constants.shared.images.attachmentIcon = UIImage(systemName: "paperclip")!
        ...

        return true
    }
}

The full list of customizations exposed by Constants is available in the source files:

note

If an image fails to load, a default placeholder image will be used instead.