androidandroid-jetpack-composeandroid-jetpack-compose-scaffold

Jetpack compose bottom app bar dark color

I'm trying to set the navigation bar to the same color as the bottom app bar, but I don't understand where the color for the app bar comes from with the dark theme. It looks like it should be MaterialTheme.colors.primarySurface but I use systemUiController.setNavigationBarColor(color = MaterialTheme.colors.primarySurface) the color is not the same as the app bar. Here you see an example when both are set to MaterialTheme.colors.primarySurface.

enter image description here

It works fine for the light theme, but not for the dark theme.

So where does the dark theme app bar color come from?

Solution

  • It happens because of elevationOverlay applied in the dark mode. You can provide null as LocalElevationOverlay to have no ElevationOverlay applied.

    CompositionLocalProvider(LocalElevationOverlay provides null) {
        BottomAppBar { /* .... */. }
}