Apply Window ThemeColor

Updated on Jul 16, 2026

Environment

Product	Window for Blazor, Dialog for Blazor
Version	14.0.0 and above

Description

After upgrading Telerik UI for Blazor to version 14 and above, the ThemeColor parameter of the Window and Dialog components is no longer available. This article shows how to achieve the previous component appearance.

Cause

The changes in the ThemeColor parameter availability and theme color values are a result of a design revision. The removed parameters and values were no longer deemed appropriate or recommended for the Telerik UI for Blazor design language.

Solution

To apply a theme color to a Window or Dialog component:

1. Implement a CSS rule that applies color and background-color styles to .k-window-titlebar. The styles can use the built-in Telerik CSS theme color variables. There is no need to override the variable values.
   CSS

   .window-primary .k-window-titlebar {
       color: var(--kendo-color-on-primary);
       background-color: var(--kendo-color-primary);
   }

2. Set the respective custom CSS class (for example, window-primary) to the Window or Dialog Class parameter.
   RAZOR

   <TelerikWindow Class="window-primary" />

Set Dialog and Window theme color with CSS

<TelerikWindow @bind-Visible="@WindowVisible"
               Class="@($"window-{ThemeColor}")"
               Width="400px">
    <WindowActions>
        <WindowAction Name="Minimize" />
        <WindowAction Name="Maximize" />
        <WindowAction Name="Close" />
    </WindowActions>
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <p>Apply theme color:</p>
        <TelerikRadioGroup Data="@ThemeColors"
                           @bind-Value="@ThemeColor"
                           Layout="@RadioGroupLayout.Vertical" />
    </WindowContent>
</TelerikWindow>

<TelerikDialog @ref="@DialogRef"
               Class="@($"window-{ThemeColor}")"
               @bind-Visible="@DialogVisible"
               Width="400px">
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogContent>
        <p>Apply theme color:</p>
        <TelerikRadioGroup Data="@ThemeColors"
                           @bind-Value="@ThemeColor"
                           Layout="@RadioGroupLayout.Vertical"
                           OnChange="@(() => { DialogRef!.Refresh(); })" />
    </DialogContent>
</TelerikDialog>

<style>
    @foreach (var themeColor in ThemeColors)
    {
        @GetCssRuleForWindowThemeColor(themeColor)
    }
</style>

<TelerikButton OnClick="@(() => WindowVisible = true)"
               Visible="@(!WindowVisible && !DialogVisible)">
    Open Window
</TelerikButton>

<TelerikButton OnClick="@(() => DialogVisible = true)"
               Visible="@(!DialogVisible && !WindowVisible)">
    Open Dialog
</TelerikButton>

@code {
    private readonly string[] ThemeColors = new string[] { "primary", "secondary", "tertiary", "inverse", "info", "success", "warning", "error" };
    private string ThemeColor { get; set; } = string.Empty;

    private TelerikDialog? DialogRef;
    private bool DialogVisible { get; set; }
    private bool WindowVisible { get; set; } = true;

    private string GetCssRuleForWindowThemeColor(string themeColor)
    {
        return
            $".window-{themeColor} .k-window-titlebar" +
            "{" +
                $"color: var(--kendo-color-on-{themeColor});" +
                $"background-color: var(--kendo-color-{themeColor});" +
            "}";
    }

    protected override void OnInitialized()
    {
        ThemeColor = ThemeColors[0];

        base.OnInitialized();
    }
}

See Also

• Dialog Overview
• Window Overview