Business Messaging Guide v2
Business Messaging
Version 2

Manage theme

Copy link

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 default theme

Copy link

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

Light theme

Copy link

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

SBUTheme.set(colorScheme: .light)

Dark theme

Copy link

The Dark theme can be applied as shown below:

SBUTheme.set(colorScheme: .dark)

Set custom fonts

Copy link

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>"

Android

Copy link

Set default theme

Copy link

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

Light theme

Copy link

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

JavaKotlin
SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Light);

Dark theme

Copy link

The Dark theme can be applied as shown below:

JavaKotlin
SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Dark);

Set custom fonts

Copy link

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.

Apply custom font to client app

Copy link

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>

Apply custom font to a notification channel

Copy link

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.

Step 1 Set a new style resource under theme

Copy link

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.

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

Step 2 Apply the style resource to channel

Copy link

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));

Set custom styles in UIKit themes for Android

Copy link

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.

Apply custom style to client app

Copy link

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" />

Apply custom style to a notification channel

Copy link

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

FeedNotificationChannelActivity

Copy link
JavaKotlin
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);

ChatNotificationChannelActivity

Copy link
JavaKotlin
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);