iOS
UIKit Themes

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.


Set up the default global theme

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.

Light theme

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

Objective-C
Swift
Light Color Skin
Copy
[SBUTheme setWithTheme:SBUTheme.light];
Light Color Skin
Copy
SBUTheme.set(theme: .light)

ThemeLight

Dark theme

The Dark theme can also be applied.

Objective-C
Swift
Light Color Skin
Copy
[SBUTheme setWithTheme:SBUTheme.dark]; 
Light Color Skin
Copy
SBUTheme.set(theme: .dark)

ThemeDark

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


Customize a global theme

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:

Objective-C
Swift
Light Color Skin
Copy
SBUTheme *newTheme = [[SBUTheme alloc] 
    initWithChannelListTheme:SBUChannelListTheme.dark
    channelCellTheme:SBUChannelCellTheme.dark
    channelTheme:SBUChannelTheme.dark
    messageInputTheme:SBUMessageInputTheme.dark 
    messageCellTheme:SBUMessageCellTheme.dark
    userListTheme:SBUUserListTheme.dark
    userCellTheme:SBUUserCellTheme.dark
    channelSettingTheme:SBUChannelSettingTheme.dark
    componentTheme:SBUComponentTheme.dark]; 

[SBUTheme setWithTheme:newTheme]
Light Color Skin
Copy
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:

Objective-C
Swift
Light Color Skin
Copy
// set channel list theme 
SBUChannelListTheme *channelListTheme = [[SBUChannelListTheme alloc]
    initWithLeftBarButtonTintColor:SBUColorSet.primary300
    ...
    
    alertBackgroundColor:SBUColorSet.background100]; 

// set component theme 
SBUComponentTheme *componentTheme = [[SBUComponentTheme alloc] 
    initWithEmptyViewBackgroundColor:SBUColorSet.background100 
    ...
    
    menuTitleFont:SBUFontSet.subtitle1]; 

// set new theme 
SBUTheme *newTheme = [[SBUTheme alloc]
    initWithChannelListTheme:channelListTheme 
    ...
    
    componentTheme:componentTheme]; 

[SBUTheme setWithTheme:newTheme];
Light Color Skin
Copy
// 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)

Components of theme

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.

PropertyTypeWhere to use

SBUTheme.channelListTheme

SBUChannelListTheme

Channel list

SBUTheme.channelCellTheme

SBUChannelCellTheme

Channel list

SBUTheme.channelTheme

SBUChannelTheme

Channel

SBUTheme.messageInputTheme

SBUMessageInputTheme

Channel

SBUTheme.messageCellTheme

SBUMessageCellTheme

Channel

SBUTheme.userListTheme

SBUUserListTheme

User list

SBUTheme.userCellTheme

SBUUserCellTheme

User list

SBUTheme.channelSettingTheme

SBUChannelSettingTheme

Channel settings

SBUTheme.componentTheme

SBUComponentTheme

Component

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

Objective-C
Swift
Light Color Skin
Copy
SBUChannelListTheme *channelListTheme = [[SBUChannelListTheme alloc] 
    initWithLeftBarButtonTintColor:SBUColorSet.primary300
    ...

];

SBUChannelCellTheme *channelCellTheme = [[SBUChannelCellTheme alloc] 
    initWithBackgroundColor:SBUColorSet.background100
    ... 

];

[SBUTheme setChannelListWithChannelListTheme:channelListTheme 
                channelCellTheme:channelCellTheme];
Light Color Skin
Copy
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.


FontSet

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.

Customize font

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.

Objective-C
Swift
Light Color Skin
Copy
SBUFontSet.body1 = [UIFont systemFontOfSize:20 weight:UIFontWeightBold];
Light Color Skin
Copy
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.

ElementFontStyleSize

H1

SF Pro Text

Medium

18

H2

SF Pro Text

Bold

16

Subtitle 1

SF Pro Text

Regular

16

Subtitle 2

SF Pro Text

Medium

14

Body 1

SF Pro Text

Regular

14

Body 2

SF Pro Text

Regular

14

Button 1

SF Pro Display

Semibold

20

Button 2

SF Pro Display

Medium

16

Button 3

SF Pro Display

Medium

14

Caption 1

SF Pro Display

Bold

12

Caption 2

SF Pro Display

Regular

12

Caption 3

SF Pro Display

Regular

11


ColorSet

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.

Customize color

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.

Objective-C
Swift
Light Color Skin
Copy
SBUColorSet.background100 = UIColor.redColor;
Light Color Skin
Copy
SBUColorSet.background100 = .red;

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