Themes

Sendbird UIKit for iOS introduces Theme, which helps you customize components like color and font with little effort. Through simple configurations, you can easily switch between Light and Dark themes and apply the identity color and font of your application to the views.

The singleton SBUTheme class is used to configure Theme. With this class, you can customize the user interface that UIKit initially provides. UIKit provides two main classes, SBUColorSet and SBUFontSet, which form interfaces.

The SBUTheme class consists of multiple themes for each component. For instance, the SBUChannelTheme is a theme for the SBUChannelViewController while the SBUChannelTheme is for the SBUChannelCell. Those themes are formed when each component is generated. If you wish to edit the global theme for your application, you can do so through setter methods such as the setChannel and setChannelList. To change the theme of a specific component, you can directly access the SBUTheme.channelCellTheme and do so.

UIKit for iOS features two basic global themes: Light and Dark. The Light theme is the default. You can change the default global theme using the setWithTheme: method.

This is the default theme for UIKit if another theme hasn’t been specified.

SBUTheme.set(theme: .light)

To view the image in full screen, click on the

The Dark theme can also be applied.

SBUTheme.set(theme: .dark)

To view the image in full screen, click on the

Note : The global theme should be configured prior to setting a viewController or creating a chat view.

Instead of just using Light and Dark themes, you can customize these global themes to your needs. Customization can be applied by configuring the SBUTheme and passing it as an argument to a parameter in the SBUTheme.set(theme:) method.

You can initialize SBUTheme with default values as below:

let newTheme = SBUTheme(channelListTheme: .dark,
            channelCellTheme: .dark,
            channelTheme: .dark,
            messageInputTheme: .dark,
            messageCellTheme: .dark,
            userListTheme: .dark,
            userCellTheme: .dark,
            channelSettingTheme: .dark,
            componentTheme: .dark)

SBUTheme.set(theme: newTheme)

You can also customize the SBUTheme as below:

// set channel list theme
let channelListTheme = SBUChannelListTheme(
    leftBarButtonTintColor: SBUColorSet.primary300,
    ...

    backgroundColor: SBUColorSet.background100)

// set component theme
let componentTheme = SBUComponentTheme(
    emptyViewBackgroundColor: SBUColorSet.background100,
    ...

    menuTitleFont: SBUFontSet.subtitle1)

// set new theme
let newTheme = SBUTheme(
    channelListTheme: channelListTheme,
    ...

    componentTheme: componentTheme)

SBUTheme.set(theme: newTheme)

UIKit provides Light and Dark themes. As the Light theme is the default, the Light theme appears by default when a viewController is initialized. The following table shows the properties of the SBUTheme that you can customize.

You can change the theme of the channel list as below:

let channelListTheme = SBUChannelListTheme(
    leftBarButtonTintColor: SBUColorSet.primary300
    ...

)

let channelCellTheme = SBUChannelCellTheme(
    backgroundColor: SBUColorSet.background100
    ...

)

SBUTheme.setChannelList(channelListTheme: channelListTheme,
            channelCellTheme: channelCellTheme)

Note : You should call the setupStyle method to update your user interface.

The SBUFontSet is a class that manages a set of UIFont properties used in UIKit. All fonts used in UIKit are configured under this class. You can customize the SBUFontSet as well prior to creating any views.

Note : In order to use a new font type, you should re-customize the theme you have been using.

The font selected for the global theme will be used across all themes. You should configure fonts in SBUFontSet first before building customized themes in order to apply customized fonts to the themes. Any font changes made thereafter won’t be applied to themes created before.

SBUFontSet.body1 = .systemFont(ofSize: 20, weight: .bold)

Note : In order to use a new font type, you should re-customize the theme you have been using.

The SBUColorSet is a class that manages a set of UIColor, such as background and main color, used in UIKit. You can create colorful views by customizing values in the SBUColorSet. Note that, like SBUFontSet, you have to configure colors prior to initialization of views. The following image shows the default color palette used in the SBUColorSet.

Note : Like the SBUFontSet, you have to configure colors prior to initialization of a view.

The properties in the SBUColorSet class can be customized, but simply changing the values of the class doesn’t affect the colors that are currently being used in the existing themes. Make sure you select and change colors you want to use for your application first and then customize and apply themes.

SBUColorSet.background100 = .red;

Note: You should change colors before you customize a theme.

Note: See the complete guide to UIKit’s ColorSet and Theme.