Chat UIKit iOS UIKit v3
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 3

Theme resources

Copy link

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

Copy link

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

Copy link

This is the default theme for UIKit.

SBUTheme.set(theme: .light)

Background color

Copy link

The background color of each component in Light theme ranges from Background-50 to Background-300.

Texts and other element colors

Copy link

The following image shows the color scheme used for texts and other elements on light backgrounds.

UI elements and status colors

Copy link

Primary-main and Secondary-main colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-main is used for warnings and Information-light is currently used for a status banner indicating frozen channels.


Dark theme

Copy link

A dark theme is a user interface designed for low-light environments, featuring primarily dark surfaces. It serves as an alternative option to the default light theme, presenting dark-colored surfaces throughout much of the interface.

The Dark theme can be applied as below:

SBUTheme.set(theme: .dark)

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

Background color

Copy link

The background color of each component in Dark theme ranges from Background-400 to Background-700.

Texts and other element colors

Copy link

The following image shows the color scheme used for texts and other elements on dark backgrounds.

UI elements and status colors

Copy link

Primary-light and Secondary-light colors are used to highlight UI elements such as icon buttons, outgoing message bubbles, and read receipt icons. Error-light is used for warnings and Information-light is currently used for a status banner indicating frozen channels.


Theme anatomy

Copy link

The images below show the combination of background and text colors used in the Light and Dark themes.

Light theme

Copy link

Dark theme

Copy link


States

Copy link

The images below show the various colors used to indicate different states in the Light and Dark themes. For Pressed and Selected states, the background color is either Primary-light or one level higher than that of the Enabled state.

Light theme

Copy link

Dark theme

Copy link


Customize global theme

Copy link

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.

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)

If you wish to customize the SBUTheme class instead of using the default values, refer to the code below.

// Set a channel list theme.
let channelListTheme = SBUChannelListTheme(
    leftBarButtonTintColor: SBUColorSet.primary300,
    backgroundColor: SBUColorSet.background100,
    // Set the necessary theme properties.
)

// Set a component theme.
let componentTheme = SBUComponentTheme(
    emptyViewBackgroundColor: SBUColorSet.background100,
    menuTitleFont: SBUFontSet.subtitle1,
    // Set the necessary theme properties.
)

// Set a new theme.
let newTheme = SBUTheme(
    channelListTheme: channelListTheme
    componentTheme: componentTheme,
    // Set the necessary theme properties.
)

SBUTheme.set(theme: newTheme)

Theme properties

Copy link

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

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

let channelListTheme = SBUChannelListTheme(
    leftBarButtonTintColor: SBUColorSet.primary300
    // Set the necessary theme properties.
)

let channelCellTheme = SBUChannelCellTheme(
    backgroundColor: SBUColorSet.background100
    // Set the necessary theme properties.
)

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

Note : Call the setupStyle method to update your user interface.