Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the guidelines on when to use `Surface` vs `Background` color in Material 3 design?

I have an app with bottom navigation bar that contains different screens the user can select. It is not clear whether i should use Surface or Background color in Material 3 colors as the default canvas for the screen.

I also have a log in screen and registration and don't know if i should use the same color in the "background" as the above sheets.

Does anyone have any advice or rule of thumbs i can follow to decide when to use Surface and when to use Background color?

like image 607
mars8 Avatar asked Oct 12 '25 16:10

mars8


2 Answers

After further reading the Material 3 guidelines, it mentions:

Note: Background is a legacy color role. It is recommended to use Surface instead of Background..

Hence the guidelines prefer to use Surface.

enter image description here

like image 196
mars8 Avatar answered Oct 14 '25 07:10

mars8


As per guidelines for Android Wear:

  • Surface colors map to components such as cards, sheets, and menus
  • Background color is found behind scrollable content
like image 30
lionscribe Avatar answered Oct 14 '25 07:10

lionscribe



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!