Manage theme

By default, Sendbird Chat UIKit for Business Messaging provides two themes: Light and Dark for all templates and notification channels. But you can customize the theme to create your own brand identity on Sendbird Dashboard under Settings > Business Messaging > Theme. You can also customize theme for each notification channel. If you select the default theme when creating a new template on the dashboard, it uses the same global theme settings as the UIKit. See the guide below on how to change the UIKit's theme settings.

• Set theme and custom fonts for iOS client app
• Set theme, custom fonts, and custom style for Android client app

Chat UIKit iOS for Business Messaging provides two global themes: Light and Dark.

To view the image in full screen, click on the

This is the default theme for all templates if another theme hasn't been specified.

SBUTheme.set(colorScheme: .light)

The Dark theme can be applied as shown below:

SBUTheme.set(colorScheme: .dark)

There are three different font styles that you can customize in notifications: size, weight, and FontFamily. Size refers to the font size of each character, whereas weight refers to the overall thickness of the character. FontFamily is a property that you can set within SBUFontSet to use custom fonts in notifications.

You can apply custom font size and weight to the theme of notification channels on the Theme page and templates on the Templates page in Sendbird Dashboard. To use custom fonts in your notification, refer to the code below. The custom font must already be set in FontFamily through AppDelegate when initializing Chat UIKit for Business Messaging.

SBUFontSet.FontFamily.notifications = "<FONT-FAMILY>"

The Light or Dark theme in Chat UIKit Android for Business Messaging can be applied using the SendbirdUIKit.setDefaultThemeMode() method.

To view the image in full screen, click on the

This is the default theme for all templates if another theme hasn't been specified.

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Light);

The Dark theme can be applied as shown below:

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Dark);

You can set and apply custom fonts to the client app. There are three different font styles that you can customize in notifications: size, weight, and fontFamily for Android and FontFamily for iOS. Size refers to the font size of each character, whereas weight refers to the overall thickness of the character. fontFamily and FontFamily are an attribute containing all fonts that can be used in the app.

You can apply custom font size and weight to the theme of notification channels on the Theme page and templates on the Templates page in Sendbird Dashboard. To use custom fonts in your app, refer to the code below.

To apply a custom font to the client app, you need to add the font to fontFamily, which is set under AppTheme in the app's styles.xml file.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="fontFamily">@font/custom_font</item>
</style>

To set a custom font to a specific notification channel, you need to create a new style resource in Sendbird Chat UIKit for Business Messaging. Refer to the code below.

First, set a new style resource for Light or Dark theme in the client app's styles.xml. The style resource needs to contain a custom font under fontFamily and the parent style must also be set to one of the Sendbird Chat UIKit themes for Business Messaging.

<!-- Light theme -->
<style name="Notification" parent="AppTheme.Sendbird">
    <item name="fontFamily">@font/custom_font</item>
</style>

When calling FeedNotificationChannelActivity to create a new view, you need to pass the resource ID of the new style resource created in step 1 as a parameter.

final int themeResId = SendbirdUIKit.isDarkMode() ? R.style.NotificationDark : R.style.Notification;
    startActivity(FeedNotificationChannelActivity.newIntent(context, "FEED_NOTIFICATION_CHANNEL_URL", themeResId));

You can create and add your own custom styles to your app while using one of the default Sendbird Chat UIKit themes for Business Messaging. If you wish to use Light theme with a custom font, you can either apply the font to the client app or a specific notification channel.

Add custom style to the client app's styles.xml file and then set the parent theme to either Light or Dark theme.

<!-- Light theme -->
<style name="CustomAppTheme" parent="AppTheme.Sendbird" />

<!-- Dark theme -->
<style name="CustomAppTheme" parent="AppTheme.Dark.Sendbird" />

You can apply the custom style to each notification channel by using its resource ID.

Intent intent = FeedNotificationChannelActivity.newIntent(context, "FEED_CHANNEL_URL", R.style.CustomAppTheme);
startActivity(intent);

Intent intent = FeedNotificationChannelActivity.newIntentFromCustomActivity(context, CustomFeedNotificationChannelActivity.class, "FEED_CHANNEL_URL", R.style.CustomAppTheme);
startActivity(intent);

Intent intent = ChatNotificationChannelActivity.newIntent(context, "CHAT_CHANNEL_URL", R.style.CustomAppTheme);
startActivity(intent);

Intent intent = ChatNotificationChannelActivity.newIntentFromCustomActivity(context, CustomChatNotificationChannelActivity.class, "CHAT_CHANNEL_URL", R.style.CustomAppTheme);
startActivity(intent);