What is color of NavigationBar in Jetpack Compose in Material color scheme?

Question

When I`m trying to force NavigationBar to be MaterialTheme.colorScheme.surface color(see Material 3 Guidelines), background color of app and color of NavigationBar differs. Example: color of NavigationBar is #f1edf7 but background color is #fffbfe. Background app color is MaterialTheme.colorScheme.surface too.

Answer 1

There is a thing named tonalElevation in material design 3. Same "base" color is different at different tonal elevation. Surface by default has tonal elevation 0dp, which means that background color is used as is. NavigationBar has tonal elevation 3dp, which changes the color slightly. If you want to force NavigationBar to be exactly surface color, change its tonal elevation to 0.

See this: https://cs.android.com/androidx/platform/frameworks/support/+/071c483c7223af673a5c0145e2fee7b0c94af1fd:compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/ColorScheme.kt;l=501