Theme

UIKit for Jetpack Compose applies the theme using MaterialTheme. All Color, Typography, and Shape used in UIKit Compose are applied through MaterialTheme. UIKit for Jetpack Compose provides its own custom SendbirdTheme, allowing you to apply a consistent theme across all UIKit screens. To easily apply your app's MaterialTheme to the UIKit, apply your app's custom MaterialTheme to the UIKit.

There are several approaches you might take:

• Apply Dark mode and Dynamic Color
• Change the properties of Color, Typography, and Shape
• Apply the theme on a global level

UIKit for Jetpack Compose provides SendbirdTheme by default. You can apply Dark mode and Dynamic Color by using the SendbirdTheme's isDarkTheme, isDynamicColor parameter.

You can apply Dark Mode by setting the isDarkTheme parameter of SendbirdTheme to true. The default will comply with the device's system settings.

@Composable
fun SendbirdDarkThemeApp() {
    SendbirdTheme(
        isDarkTheme = true,
    ) {
        /* ... */
        SendbirdContainedButton(text = "", onClick = { /* ... */ })
    }
}

You can apply Dynamic Color by setting the isDynamicColor parameter of SendbirdTheme to true. The default is false. To learn more about Dynamic Color, see here.

@Composable
fun SendbirdDynamicColorThemeApp() {
    SendbirdTheme(
        isDynamicColor = true,
    ) {
        /* ... */
        SendbirdContainedButton(text = "", onClick = { /* ... */ })
    }
}

You can use the default ColorScheme, Typography, and Shapes of Sendbird or customize them.

UIKit for Jetpack Compose provides the following properties:

• sendbirdDarkColorScheme, sendbirdLightColorScheme: ColorScheme used in the UIKit
• sendbirdTypography: Typography used in the UIKit
• sendbirdShapes: Shapes used in the UIKit

val CustomLightColorScheme = sendbirdLightColorScheme(
    /* ... */
)

val CustomDarkColorScheme = sendbirdDarkColorScheme(
    /* ... */
)

val CustomTypography = sendbirdTypography(
    /* ... */
)

val CustomShapes = sendbirdShapes(
    /* ... */
)

@Composable
fun SendbirdThemeApp() {
    SendbirdTheme(
        lightColorScheme = CustomLightColorScheme,
        darkColorScheme = CustomDarkColorScheme,
        typography = CustomTypography,
        shapes = CustomShapes,
    ) {
        /* ... */
        SendbirdContainedButton(text = "", onClick = { /* ... */ })
    }
}

You can create your own Theme and apply it to the UIKit for Jetpack Compose screens.

1. Create a custom Theme for your app. UIKit for Jetpack Compose is based on MaterialTheme. Therefore, you can create a custom Theme for your app by referring to this guide.

2. Select the target to apply the Theme.

2-1. Apply the Theme to all UIKit screens. You can apply the Theme to all UIKit screens through sendbirdGroupChannelNavGraph. sendbirdGroupChannelNavGraph receives the theme property and delivers a consistent Theme across the screens.

@Composable
fun SendbirdUikitApp() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = SendbirdNavigation.GroupChannel.route
    ) {
        sendbirdGroupChannelNavGraph(
            // Apply the theme
            theme = { content ->
                MyApplicationTheme {
                    content()
                }
            },
            navController = navController
        )
    }
}

2-2. You can also apply the Theme to a specific UIKit screen. To do so, wrap the composable function of the target screen with CustomSendbirdTheme.

@Composable
fun ChannelsScreenExample(
    navController: NavHostController
) {
    MyApplicationTheme {
        ChannelsScreen(
            navController = navController
        )
    }
}

To apply the screen with the Theme to the Navigation, see our guide on Navigation.