[Solved] AppBar Tag Helper - how to apply primary theme color

1 Answer 14 Views

AppBar

Alfonzo asked on 11 May 2026, 08:12 AM

Hi,

I'm using Telerik UI for ASP.NET Core with a custom theme exported from Theme Builder (Default base). The theme is loaded as a local CSS.

Theme
Custom Theme Builder export with a teal primary color.

Layout (`_Layout.cshtml`)

<head>
    <link rel="stylesheet" href="~/css/my-theme.v0.1.0.css" asp-append-version="true" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.kendostatic.com/2026.1.415/js/kendo.all.min.js"></script>
    <script src="https://cdn.kendostatic.com/2026.1.415/js/kendo.aspnetmvc.min.js"></script>
</head>
<body class="k-body k-bg-surface">
    <header>
        <kendo-appbar name="appBar">
            <items>
                <appbar-item type="AppBarItemType.ContentItem"
                    template="<a class='k-button k-button-flat' href='/Index'>Index</a>">
                </appbar-item>
            </items>
        </kendo-appbar>
    </header>
</body>

What works

The AppBar correctly changes background when switching between `AppBarThemeColor.Dark`, `AppBarThemeColor.Light`, and `AppBarThemeColor.Inherit`. The theme is loading and the component is initializing correctly.

Questions

1. Is there a way to apply `primary` as the AppBar theme color using the Tag Helper?

Thanks

1 Answer, 1 is accepted

Accepted

answered on 13 May 2026, 10:01 AM

Hello Alfonzo,

Thank you for the details provided.

The AppBar Tag Helper currently supports only the built-in theme colors: Dark, Light, and Inherit. There is no direct option to set the AppBar's theme color to "primary" through the Tag Helper configuration.

To achieve a "primary" colored AppBar, you can add a custom CSS class to the AppBar and set the background color using your theme's primary color variable. For example:

<kendo-appbar name="appBar" class="my-appbar-primary">
    <items>
        <appbar-item type="AppBarItemType.ContentItem"
            template="<a class='k-button k-button-flat' href='/Index'>Index</a>">
        </appbar-item>
    </items>
</kendo-appbar>

Then, in your custom theme CSS file:

.my-appbar-primary {
    background-color: var(--kendo-primary); /* Use your theme's primary color variable */
}

If you want built-in support for "primary" in the Tag Helper, you can share this suggestion in the feedback portal.

More details about component rendering and theme customization:

Kind Regards,
Anton Mironov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.