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

Question

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
)

Answer 1

EDIT

The use val systemUiController = rememberSystemUiController() is deprecated : https://google.github.io/accompanist/systemuicontroller/

Use custom method or try with "androidx.activity:activity" library v1.8.0-rc01 in your activity. Do something like this :

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.auto(
        MaterialTheme.colors.primary.toArgb(),
        MaterialTheme.colors.primary.toArgb()
    ),
    navigationBarStyle = SystemBarStyle.auto(
        MaterialTheme.colors.primary.toArgb(),
         MaterialTheme.colors.primary.toArgb()
     )
)

Answer 2

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.