androidandroid-jetpack-composematerial-designandroid-jetpack-compose-material3

How to change statusbar and navigation bar color in JetpackCompose App?


I want to change status bar and navigation bar color in my app by default it is not set. This is my composeable AppTheme function which I need to apply the change in.

val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }
private val DarkColorScheme = darkColorScheme(
    primaryContainer = Color.Black,
    onPrimaryContainer = Color.White
)
private val LightColorScheme = lightColorScheme(
    primary = RoyalBlue,
    primaryContainer = RoyalBlue,
    onPrimaryContainer = Color.White
)

Solution

  • Add this line in your AppTheme Composable Function:

    window.statusBarColor = if (darkTheme)  Color.Black.toArgb() else RoyalBlue.toArgb()
    

    here change the color according to your dark and light colors.

    Also to change the navigation bar color add these lines of code in AppTheme composable:

    val systemUiController = rememberSystemUiController()
    if (darkTheme) {
        systemUiController.setSystemBarsColor(
            color = Color.Black
        )
    } else {
        systemUiController.setSystemBarsColor(
            color = RoyalBlue
        )
    }
    

    Change the colors accordingly of your choice.