Appearance Settings

Updated on Jan 27, 2026

This article outlines the available AppBar parameters, which control its appearance.

ThemeColor

You can change the color of the AppBar by setting the ThemeColor parameter to a member of the Telerik.Blazor.ThemeConstants.AppBar.ThemeColor class:

Class members	Manual declarations
Base	base
Primary	primary
Secondary	secondary
Tertiary	tertiary
Info	info
Success	success
Warning	warning
Error	error
Dark	dark
Light	light
Inverse	inverse

The built-in AppBar colors

<TelerikDropDownList Data="@ThemeColors" @bind-Value="@SelectedColor" Width="150px"></TelerikDropDownList>

<TelerikAppBar ThemeColor="@SelectedColor">
    <AppBarSection>
        <span>Our Logo</span>
    </AppBarSection>

    <AppBarSpacer Size="25%"></AppBarSpacer>

    <AppBarSection>
        <span>Our Products</span>
    </AppBarSection>

    <AppBarSpacer Size="50px"></AppBarSpacer>

    <AppBarSection>
        <span>Our Mission</span>
    </AppBarSection>

    <AppBarSpacer></AppBarSpacer>

    <AppBarSection>
        <TelerikSvgIcon Icon="@SvgIcon.User"></TelerikSvgIcon>
    </AppBarSection>

    <AppBarSeparator></AppBarSeparator>

    <AppBarSection>
        <TelerikSvgIcon Icon="@SvgIcon.Logout"></TelerikSvgIcon>
    </AppBarSection>
</TelerikAppBar>

@code {
    private string SelectedColor { get; set; } = "base";

    private List<string> ThemeColors { get; set; } = new List<string>()
    {
        "base",
        "primary",
        "secondary",
        "tertiary",
        "info",
        "success",
        "warning",
        "error",
        "dark",
        "light",
        "inverse"
    };
}