Jetpack compose bottom app bar dark color

Question

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.

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

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

score 8 · Accepted Answer · answered Jul 31 '21 at 14:47

8

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 { /* .... */. }
}

answered Jul 31 '21 at 14:47

Gabriele Mariotti

320,139
94
887
841

2

Thanks, I would never had figured that out! – Mackan Jul 31 '21 at 16:03

score 0 · Answer 2 · answered Apr 27 '23 at 13:48

Adding explanation to Gabriele answer

For example in BottomNavigation we have this code

@Composable
fun BottomNavigation(
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: Dp = BottomNavigationDefaults.Elevation,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = backgroundColor,
        contentColor = contentColor,
        elevation = elevation,
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .height(BottomNavigationHeight)
                .selectableGroup(),
            horizontalArrangement = Arrangement.SpaceBetween,
            content = content
        )
    }
}

If we go to the surface elevation attribute before creating the Row component to lay the navigation icons we can see this

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    shape: Shape = RectangleShape,
    color: Color = MaterialTheme.colors.surface,
    contentColor: Color = contentColorFor(color),
    border: BorderStroke? = null,
    elevation: Dp = 0.dp,
    content: @Composable () -> Unit
) {
    val absoluteElevation = LocalAbsoluteElevation.current + elevation
    CompositionLocalProvider(
        LocalContentColor provides contentColor,
        LocalAbsoluteElevation provides absoluteElevation
    ) {
        Box(
            modifier = modifier
                .surface(
                    shape = shape,
                    backgroundColor = surfaceColorAtElevation(
                        color = color,
                        elevationOverlay = LocalElevationOverlay.current,
                        absoluteElevation = absoluteElevation
                    ),
                    border = border,
                    elevation = elevation
                )

Here we can see that elevationOverlay = LocalElevationOverlay.current is used to determine the overlay of the bottom nav, and this is because we need to know about dark or light theme because elevations in dark themes does not appear to be so much visible

Read https://developer.android.com/reference/kotlin/androidx/compose/material/ElevationOverlay

Jetpack compose bottom app bar dark color

2 Answers2