In this demo, the available types of background color for Angular AppBar are showcased. The background and font colors can be set using the ColorMode property. The different types are light, dark, primary, and inherit.

Light - The AppBar can be displayed with a light background.

Dark - The AppBar can be displayed with a dark background.

Primary - The AppBar can be displayed with primary colors.

Inherit - The AppBar inherits the color from its parent element.

On mobile devices, media query is used to display the AppBar in adaptive views. You can click the menu to see the hidden AppBar content.