"Both this app’s top app bar color and background color is the primary color: white. However, on scroll the top app bar gains a shadow, showing it has an elevation higher than the content that scrolls behind it."

Example

"This app’s bright, seamless layout uses its primary blue (blue 700) color for app bars, bottom navigation, and the background color, so individual elements stand out less, and content stands out more. The activation state uses the secondary yellow. It includes a shadow on the bottom navigation to show the elevation division between surfaces."


When an app’s top or bottom app bar color is the same color as the background color:
- Blend together
- Placing emphasis on an app’s content instead of its structure

Arizona State University

University of Michigan - Ann Arbor

The way color is applied to the top and bottom app bars:
- Helps users identify them 
- Understand their relationship to surrounding elements

Top and Bottom App Bars

Material Design Documentation

Through color difference:
- Shadow overlay the top and bottom bars can be differentiated
- Other surfaces can be demarcated

Learn Before

Related

Learn After