jetpack compose material3中TopAppBar的默认颜色

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

Answer 1

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)