3

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));
PlutoHDDev
  • 540
  • 7
  • 25
  • If you want to hardcode the color, then a good suggestion would be to take a screen shot from the android phone and use the color grab android app to get the hex values for a specific pixel area. From there, you can use those hex values as you like in your app. But, I can't help you if you want to dynamically change your app's color – Vaishnav Kanhirathingal May 03 '22 at 08:01

2 Answers2

1

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

aspix
  • 425
  • 2
  • 9
0

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.

Daniel
  • 380
  • 2
  • 14
  • The dynamic colors of Material You are somehow integrated into the color scheme. In the question, I already assumed that it is not simply the surface color. As far as I understand your answer the following should work: `const Color(0xffffffff).harmonizeWith(Theme.of(context).colorScheme.surface)` However, this is even further from the color in Google Apps compared to surface. – PlutoHDDev May 04 '22 at 09:52