Theme

By default, Sendbird Chat UIKit for Notifications 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 Notifications > 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.

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

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

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Light);

To view the image in full screen, click on the

The Dark theme can be applied as shown below:

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Dark);

To view the image in full screen, click on the

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. Size refers to the font size of each character, whereas weight refers to the overall thickness of the character. fontFamily is an attribute containing all fonts that can be used in the app.

You can apply custom font size and weight to the app's theme on the Theme page in Sendbird Dashboard. To use custom fonts in your app, refer to the code below. The custom font must already be set in fontFamily through AppTheme when initializing Chat UIKit for Notifications.

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 Notifications. 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 Notifications.

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

<style name="NotificationDark" parent="AppTheme.Dark.Sendbird">
    <item name="fontFamily">@font/custom_font</item>
</style>

When calling ChatNotificationChannelActivity or FeedNotificationChannelActivity to create a new chat view or feed 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(ChatNotificationChannelActivity.newIntent(context, "CHAT_NOTIFICATION_CHANNEL_URL", themeResId));

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