CODEWITHSUNDEEP
material-designgoogle-appsmaterial-design-3
Florian
Florian

Reputation: 659

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

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?

Light mode (Google Play Store on the right) Dark mode (Google Play Store on the right)

In Flutter, surface is implemented like this:

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

Upvotes: 4

Views: 3174

Answers (2)

aspix
aspix

Reputation: 475

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

Upvotes: 2

Daniel
Daniel

Reputation: 461

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.

Upvotes: 1

Related Questions