Which backgroundcolor does the Material Design 3 Navigation bar have in Google Apps?

Question

According to the navigation bar documentation in Material Design 3, the navigation bar has the background color md.sys.color.surface.

I tried this in one app, but the Google Apps (Play Store, Photos, ...) seem to use a different color. Does anyone know what color Google uses here?

In Flutter, surface is implemented like this:

final Color surface = Color(neutrals.get(dark ? 10 : 99));

Answer 1

It is also the surface color, but they configured other colors for surface. In this case, it is #FFFFFFFF for Light mode and #FF000000 for dark mode.

Answer 2

There is simple but not that obvious solution

val navigationBarElevation = NavigationBarDefaults.Elevation
systemUiController.setNavigationBarColor(color = colorScheme.surfaceColorAtElevation(navigationBarElevation)) 

A NavigationBar itself uses a surface color and is elevated by some default value. You can access the latter value this way: NavigationBarDefaults.Elevation. Knowing this you should use an extension function ColorScheme.surfaceColorAtElevation(), which guarantees you the required color. Note that if you use a default ColorScheme, change colorScheme to MaterialTheme.colorScheme