Chat UIKit iOS UIKit v2
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 2
Sendbird Chat UIKit v2 for iOS UIKit is no longer supported as a new version is released. Check out our latest Chat UIKit v3

Themes

Copy link

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

Copy link

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

Copy link

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

SwiftObjective-C
SBUTheme.set(theme: .light)

Dark theme

Copy link

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

Copy link

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:

SwiftObjective-C
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:

SwiftObjective-C
// 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

Copy link

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

Copy link
Property nameTypeWhere 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

Copy link

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

Copy link

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.

SwiftObjective-C
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.

Fonts for elements

Copy link
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

Copy link

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

Copy link

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.

Colors for elements

Copy link
ElementColor

primary100

UIColor(red: 219.0 / 255.0, green: 209.0 / 255.0, blue: 1.0, alpha: 1.0)

primary200

UIColor(red: 194.0 / 255.0, green: 169.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)

primary300

UIColor(red: 116.0 / 255.0, green: 45.0 / 255.0, blue: 221.0 / 255.0, alpha: 1.0)

primary400

UIColor(red: 98.0 / 255.0, green: 17.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0)

primary500

UIColor(red: 73.0 / 255.0, green: 19.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0)

secondary100

UIColor(red: 168.0 / 255.0, green: 226.0 / 255.0, blue: 171.0 / 255.0, alpha: 1.0)

secondary200

UIColor(red: 105.0 / 255.0, green: 192.0 / 255.0, blue: 133.0 / 255.0, alpha: 1.0)

secondary300

UIColor(red: 37.0 / 255.0, green: 156.0 / 255.0, blue: 114.0 / 255.0, alpha: 1.0)

secondary400

UIColor(red: 2.0 / 255.0, green: 125.0 / 255.0, blue: 105.0 / 255.0, alpha: 1.0)

secondary500

UIColor(red: 6.0 / 255.0, green: 104.0 / 255.0, blue: 88.0 / 255.0, alpha: 1.0)

background50

UIColor(white: 1.0, alpha: 1.0)

background100

UIColor(white: 238.0 / 255.0, alpha: 1.0)

background200

UIColor(white: 224.0 / 255.0, alpha: 1.0)

background300

UIColor(white: 189.0 / 255.0, alpha: 1.0)

background400

UIColor(white: 57.0 / 255.0, alpha: 1.0)

background500

UIColor(white: 44.0 / 255.0, alpha: 1.0)

background600

UIColor(white: 22.0 / 255.0, alpha: 1.0)

background700

UIColor(white: 0.0, alpha: 1.0)

overlay01

UIColor(white: 0.0, alpha: 0.55)

overlay02

UIColor(white: 0.0, alpha: 0.32)

onlight01

UIColor(white: 0.0, alpha: 0.88)

onlight02

UIColor(white: 0.0, alpha: 0.5)

onlight03

UIColor(white: 0.0, alpha: 0.38)

onlight04

UIColor(white: 0.0, alpha: 0.12)

ondark01

UIColor(white: 1.0, alpha: 0.88)

ondark02

UIColor(white: 1.0, alpha: 0.5)

ondark03

UIColor(white: 1.0, alpha: 0.38)

ondark04

UIColor(white: 1.0, alpha: 0.12)

error100

UIColor(red: 253.0 / 255.0, green: 170.0 / 255.0, blue: 170.0 / 255.0, alpha: 1.0)

error200

UIColor(red: 246.0 / 255.0, green: 97.0 / 255.0, blue: 97.0 / 255.0, alpha: 1.0)

error300

UIColor(red: 222.0 / 255.0, green: 54.0 / 255.0, blue: 11.0 / 255.0, alpha: 1.0)

error400

UIColor(red: 191.0 / 255.0, green: 7.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0)

error500

UIColor(red: 157.0 / 255.0, green: 9.0 / 255.0, blue: 30.0 / 255.0, alpha: 1.0)

information

UIColor(red: 173.0 / 255.0, green: 201.0 / 255.0, blue: 1.0, alpha: 1.0)

highlight

UIColor(red: 1.0, green: 242.0 / 255.0, blue: 182.0 / 255.0, alpha: 1.0)