Default color of TopAppBar in jetpack compose material3

Question

I find that the default color of TopAppBar in my project is white(in light mode), while normally it should has another default color, like in document.

I notice that the default color in code is:

@Composable
fun TopAppBar(
    colors: TopAppBarColors = TopAppBarDefaults.smallTopAppBarColors(),
    ...
)

@Composable
fun smallTopAppBarColors(
    containerColor: Color = TopAppBarSmallTokens.ContainerColor.toColor(),
    ...
）

internal object TopAppBarSmallTokens {
    val ContainerColor = ColorSchemeKeyTokens.Surface
    ...
}

which is the same as that of BottomAppBar, ColorSchemeKeyTokens.Surface:

@Composable
fun BottomAppBar(
    containerColor: Color = BottomAppBarDefaults.containerColor,
    ...
)

object BottomAppBarDefaults {
    val containerColor: Color @Composable get() = BottomAppBarTokens.ContainerColor.toColor()
    ...
}

internal object BottomAppBarTokens {
    val ContainerColor = ColorSchemeKeyTokens.Surface
    ...
}

But in my test, container color of TopAppBar is the same as document shows, while container color of TopAppBar is another: white.

I can't figured out what causes the default color of TopAppBar to turn into white.

Versions of libraies:

compose: 1.3.0-rc01
material3: 1.0.0-rc01

score 0 · Answer 1 · answered Jan 20 '23 at 10:27

The default background color in M3 TopAppBar is based on containerColor attribute defined in the colors attribute.

The default color is val ContainerColor = ColorSchemeKeyTokens.Surface.

Check in your theme. If the surface color is omitted the Light scheme default value is: #FFFBFE as described in the doc.

You can check in the code:

val Surface = PaletteTokens.Neutral99
val Neutral99 = Color(red = 255, green = 251, blue = 254)

Default color of TopAppBar in jetpack compose material3

1 Answers1