How to control status bar and nav bar colors when ...

# compose

[Erlan Amanatov]

How to control status bar and nav bar colors when ModalBottomSheet is displayed?
The app uses Material3 only with darkColors and in activity enableEdgeToEdge is configured as

enableEdgeToEdge(
    statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT),
    navigationBarStyle = SystemBarStyle.dark(Color.argb(0x80, 0x1b, 0x1b, 0x1b))
)

Overall, everything works well, but when the ModalBottomSheet is displayed, the colors of the status bar and navigation bar change depending on the device's dark theme

[Erfannj En]

To address this issue I have utilized CompositonLocal to provide a SAM to change the system bar style temporarily:

https://github.com/erfansn/ComposableScreens/blob/master/common/src/main/java/ir/erfansn/composablescreens/common/SystemBarStyle.kt

https://github.com/erfansn/ComposableScreens/blob/65ba11421fa71bce7eb38b3d5c8ca691[…]/app/src/main/java/ir/erfansn/composablescreens/MainActivity.kt

https://github.com/erfansn/ComposableScreens/blob/65ba11421fa71bce7eb38b3d5c8ca691[…]eens/food/kristina_cookie/feature/cart/PaymentSuccessfulPane.kt

[Alex Styl]

@Erlan Amanatov the enableEdgeToEdge() changes the colors of the window of your activity. modals (such as the modalbottomsheet) have their own separate window, so you need to do changes on that.

I am not aware how to hold access to it. Worst case scenario, you can always use the Compose Unstyled ModalBottomSheet which gives you access to the LocalModalWindow which you can style as you like (code example).

[Stylianos Gakis]

Looking at their implementation, they seem to be calling

WindowCompat.getInsetsController(window, window.decorView).apply {
 isAppearanceLightStatusBars = properties.isAppearanceLightStatusBars
 isAppearanceLightNavigationBars = properties.isAppearanceLightNavigationBars
}

right here: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]odalBottomSheet.android.kt;l=550-553?q=ModalBottomSheetDialog

Going up the call stack, there seems to take in a properties parameter, where you can give your own values https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]se/material3/ModalBottomSheet.kt;l=136-140?q=ModalBottomSheet so you can decide if it's dark or not.

Looks very straightforward to me, give it a shot and lmk if it works or not

[Erlan Amanatov]

@Stylianos Gakis
Yes, first of all, I looked at all the parameters of the ModalBottomSheet function, thinking that there might be configuration parameters, but there aren't any.
I am using version 1.3.0 of the dependency androidx.compose.material3:material3,
and ModalBottomSheetProperties looks different there:

actual class ModalBottomSheetProperties(
    val securePolicy: SecureFlagPolicy = SecureFlagPolicy.Inherit,
    actual val shouldDismissOnBackPress: Boolean = true,
)

[Erlan Amanatov]

@Alex Styl Yes, I was aware of the existence of your project composeunstyled.com and had considered that opiton, thank you

[Erlan Amanatov]

@Stylianos Gakis
It seems that the changes in your link will only be available in version 1.4.0-alpha03, which hasn't been released yet

[Erlan Amanatov]

@huthefa didn't understand your message, could you rephrase it?

[Stylianos Gakis]

I see, then you either wait for the alpha release or look for any of the alternatives. It's your choice 😊

[Erlan Amanatov]

yea, looks like I will wait for the next stable release