Theme resources

Sendbird Chat SwiftUI 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 SwiftUI, 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.

Sendbird Chat SwiftUI provides two global themes: Light and Dark. The Light theme is the default global theme but you can change it by using the set(theme:) method.

This is the default theme for SwiftUI.

SBUTheme.set(theme: .light)

To view the image in full screen, click on the

You can also apply the Dark theme to your app by following the code below.

SBUTheme.set(theme: .dark)

To view the image in full screen, click on the

Note : The global theme should be configured prior to setting the SwiftUI View.

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.

Note : The Sendbird Chat SwiftUI consists of the Sendbird Chat UIKit as its core. SBUTheme is a feature inside UIKit, and the theme of every View in SwiftUI is configured based on SBUTheme. Since SBUTheme is configured in UIKit, you need to use UIColor and UIFont to set the properties when setting them in SwiftUI.
SwiftUI developers may not be familiar with the use of UIColor or UIFont, so Sendbird Chat SwiftUI provides the asUIColor() and asUIFont() extension functions to convert Color and Font to UIKit values.

Initialize SBUTheme with default values as shown below.

// Set a channel list theme.
let groupChannelListTheme = SBUGroupChannelListTheme(
    leftBarButtonTintColor: Color(
        red: 37.0 / 255.0,
        green: 156.0 / 255.0,
        blue: 114.0 / 255.0,
        opacity: 0.5
    ).asUIColor(),
    backgroundColor: Color(
        white: 189.0 / 255.0,
        opacity: 1.0
    ).asUIColor()
    // Set the necessary theme properties.
)
let groupChannelCellTheme = SBUGroupChannelCellTheme(
    backgroundColor: Color(
        white: 189.0 / 255.0,
        opacity: 1.0
    ).asUIColor(),
    titleFont: Font.system(
        size: 18.0,
        weight: .bold
    ).asUIFont()
    // Set the necessary theme properties.
)

// Set a component theme.
let componentTheme = SBUComponentTheme(
    emptyViewBackgroundColor: Color(
        white: 189.0 / 255.0,
        opacity: 1.0
    ).asUIColor(),
    menuTitleFont: Font.subheadline.asUIFont()
    // Set the necessary theme properties.
)

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

SBUTheme.set(theme: newTheme)

Note : Theme must be set before SendbirdSwiftUI initialization, and if you change them at runtime, you must call SBUTheme.set(theme:)' to reflect them in the generated theme.