Themes

A theme is style that's applied to your entire app, activity, or view hierarchy rather than an individual view. It's composed of different styles used in modules and components. By default, Sendbird UIKit for Android provides two themes: Light and Dark. But you can customize these themes to create your own brand identity by changing the value of resources.

Setup the default theme

UIKit for Android's Light or Dark theme can be applied using the SendbirdUIKit.setDefaultThemeMode() method.

Light theme

This is the default theme for UIKit if another theme hasn’t been specified.

KotlinJava

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Light)

Dark theme

The Dark theme can be applied as below:

KotlinJava

SendbirdUIKit.setDefaultThemeMode(SendbirdUIKit.ThemeMode.Dark)

Customize theme

A theme in UIKit is composed of various styles used in modules and components. To change them, you must inherit the style of the module you wish to customize and create a custom style first. Then, you can apply the new style to the theme. You can also set and customize individual component themes for when you want to use components outside of the set module. To learn more about style, go to the Style resource page.

Note : For dark theme, use AppTheme.Dark.Sendbird in the code. You can see all the different styles that are applied to the dark theme in the res/values/styles_dark.xml file.

<style name="AppTheme.Sendbird">
    <item name="sb_module_banned_user_list">@style/Module.BannedUserList</item>
    <item name="sb_module_channel_list">@style/Module.ChannelList</item>
    <item name="sb_module_channel">@style/Module.Channel</item>
    <item name="sb_module_channel_settings">@style/Module.ChannelSettings</item>
    <item name="sb_module_create_channel">@style/Module.CreateChannel</item>
    <item name="sb_module_invite_user">@style/Module.InviteUser</item>
    <item name="sb_module_member_list">@style/Module.MemberList</item>
    <item name="sb_module_message_search">@style/Module.MessageSearch</item>
    <item name="sb_module_moderation">@style/Module.Moderation</item>
    <item name="sb_module_muted_member_list">@style/Module.MutedMemberList</item>
    <item name="sb_module_open_channel">@style/Module.OpenChannel</item>
    <item name="sb_module_open_channel_settings">@style/Module.OpenChannelSettings</item>
    <item name="sb_module_operator_list">@style/Module.OperatorList</item>
    <item name="sb_module_participant_list">@style/Module.ParticipantList</item>
    <item name="sb_module_register_operator_list">@style/Module.RegisterOperator</item>

    <item name="sb_component_channel_message_input">@style/Component.ChannelMessageInput</item>
    <item name="sb_component_channel_settings_info">@style/Component.ChannelSettingsInfo</item>
    <item name="sb_component_channel_settings_menu">@style/Component.ChannelSettingsMenu</item>
    <item name="sb_component_message_search_header">@style/Component.MessageSearchHeader</item>
    <item name="sb_component_moderation_list">@style/Component.ModerationList</item>
    <item name="sb_component_open_channel_message_input">@style/Component.OpenChannelMessageInput</item>
    <item name="sb_component_open_channel_settings_info">@style/Component.OpenChannelSettingsInfo</item>
    <item name="sb_component_open_channel_settings_menu">@style/Component.OpenChannelSettingsMenu</item>
    <item name="sb_component_header">@style/Component.Header</item>
    <item name="sb_component_state_header">@style/Component.Header.State</item>
    <item name="sb_component_list">@style/Component.List</item>
    <item name="sb_component_status">@style/Component.Status</item>
</style>

For an in-depth practical demonstration, see our sample code.

On this page

Setup the default theme

Light theme Dark theme

Customize theme

Sample app