New Docs for the latest UIKit v3 beta for iOS is now available.Go to v3 beta
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.
SwiftObjective-C
SBUTheme.set(theme: .light)
Dark theme
The Dark theme can also be applied.
SwiftObjective-C
SBUTheme.set(theme: .dark)
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:
// 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.
List of properties
Property name
Type
Where 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:
SwiftObjective-C
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.
Note : In order to use a new font type, you should re-customize the theme you have been using.
Fonts for elements
Element
Font
Style
Size
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.
SwiftObjective-C
SBUColorSet.background100 = .red;
Note: You should change colors before you customize a theme.