Themes
Sendbird UIKit for iOS provides themes to help you customize the style of your app. Through simple configurations, you can easily switch between Light
and Dark
themes and apply custom colors and fonts to the views.
SBUTheme
is a singleton class that is used to configure themes. If you don't want to use the default user interfaces provided by UIKit, you can customize them by using the SBUTheme
class. By customizing the theme of the view controller, you can apply the same custom theme to all its module components.
If you wish to set a global theme to each key function in the client app, you can do so by using setter methods such as setChannel
and setChannelList
in the corresponding theme class of each view controller.
Set up the default global theme
UIKit for iOS provides two global themes: Light
and Dark
. The Light
theme is the default global theme but you can change it by using the setWithTheme:
method.
Light theme
This is the default theme for UIKit.
Dark theme
You can also apply the Dark
theme to your app by following the code below.
Note : The global theme should be configured prior to setting the view controller or creating a chat view.
Customize global theme
Instead of using the provided Light
and Dark
themes, you can customize the global theme by configuring SBUTheme
and passing it as an argument to a parameter in the SBUTheme.set(theme:)
method.
Initialize SBUTheme
with default values as shown below.
If you wish to customize the SBUTheme
class instead of using the default values, refer to the code below.
Theme properties
The Light
theme appears by default when a view controller is initialized. The following table shows the customizable properties of the SBUTheme
class.
List of properties
Property name | Type | Where to use |
---|---|---|
SBUTheme.channelListTheme | SBUChannelListTheme | Group Channel list |
SBUTheme.channelCellTheme | SBUChannelCellTheme | Group Channel list |
SBUTheme.openChannelListTheme | SBUOpenChannelListTheme | Open Channel list |
SBUTheme.openChannelCellTheme | SBUOpenChannelCellTheme | Open 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 |
To change the theme of the channel list, refer to the code below.
Note : Call the
setupStyle
method to update your user interface.