Appearance

Updated on Aug 18, 2026

The AppBar component has a settings property allowing you to define different theme colors. The themeColor configuration will be applied as background color inside the component.

• Configurator demo
• Theme Color

Configurator demo

The following example demonstrates configuring the different aspects of the AppBar appearance through a configurator.

Loading ...

Theme Color

The AppBar allows you to specify predefined theme colors.

The available themeColor values are:

• base—Applies the base coloring.
• primary—Applies coloring based on primary theme color.
• secondary—Applies coloring based on secondary theme color.
• tertiary— Applies coloring based on tertiary theme color.
• inverse— Applies coloring based on inverted theme color.

You can define a custom AppBar background color by using the k-appbar CSS class.

Loading ...

Suggested Links

• API Reference of the AppBarProps
• Creating Custom Styles with ThemeBuilder