From 30512c0766c8ba959d9591161981c47fed28a70c Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 9 Jul 2026 17:49:53 +0300
Subject: [PATCH 1/2] kb(Window): Show how to set ThemeColor with Class
---
knowledge-base/window-themecolor.md | 134 ++++++++++++++++++++++++++++
upgrade/breaking-changes/14-0-0.md | 4 +-
2 files changed, 136 insertions(+), 2 deletions(-)
create mode 100644 knowledge-base/window-themecolor.md
diff --git a/knowledge-base/window-themecolor.md b/knowledge-base/window-themecolor.md
new file mode 100644
index 000000000..a97d7c533
--- /dev/null
+++ b/knowledge-base/window-themecolor.md
@@ -0,0 +1,134 @@
+---
+title: Apply Window ThemeColor
+description: Learn how to apply background and color styles to the Telerik Window and Dialog components for Blazor in the same way as the removed ThemeColor parameter.
+type: troubleshooting
+page_title: How to Apply ThemeColor to Blazor Dialog and Window
+meta_title: How to Apply ThemeColor to Blazor Dialog and Window
+slug: window-kb-themecolor
+tags: telerik, blazor, window, styles
+ticketid: 1716488
+res_type: kb
+---
+
+## 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](slug:changes-in-14-0-0#themecolor-changes) 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](slug:themes-custom#setting-theme-variables). There is no need to override the variable values.
+ ````CSS.skip-repl
+ .window-primary .k-window-titlebar {
+ color: var(--kendo-color-on-primary);
+ background-color: var(--kendo-color-primary);
+ }
+ ````
+1. Set the respective custom CSS class (for example, `window-primary`) to the Window or Dialog `Class` parameter.
+ ````RAZOR.skip-repl
+
+ ````
+
+>caption Set Dialog and Window theme color with CSS
+
+````RAZOR
+
+
+
+
+
+
+
+ Window Title
+
+
+
Apply theme color:
+
+
+
+
+
+ Dialog Title
+
+
Apply theme color:
+
+
+
+
+
+
+
+ Open Window
+
+
+
+ Open Dialog
+
+
+@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](slug:dialog-overview)
+* [Window Overview](slug:window-overview)
diff --git a/upgrade/breaking-changes/14-0-0.md b/upgrade/breaking-changes/14-0-0.md
index 3a2443440..dec3134ff 100644
--- a/upgrade/breaking-changes/14-0-0.md
+++ b/upgrade/breaking-changes/14-0-0.md
@@ -90,8 +90,8 @@ The following values of the `ThemeColor` parameter are removed from the followin
The `ThemeColor` parameter is removed from:
* Card. See how to [use the `Class` parameter to apply theme colors to Cards](slug:card-kb-replace-themecolor-parameter).
-* Dialog
-* Window
+* Dialog. See how to [use the `Class` parameter instead](slug:window-kb-themecolor).
+* Window. See how to [use the `Class` parameter instead](slug:window-kb-themecolor).
* Popup edit settings
### OverlayThemeColor Parameter
From a8ef2d4fc830a961b529e57a1d08f54c16a95b22 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Fri, 10 Jul 2026 09:00:02 +0300
Subject: [PATCH 2/2] Update knowledge-base/window-themecolor.md
---
knowledge-base/window-themecolor.md | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/knowledge-base/window-themecolor.md b/knowledge-base/window-themecolor.md
index a97d7c533..85aec04d3 100644
--- a/knowledge-base/window-themecolor.md
+++ b/knowledge-base/window-themecolor.md
@@ -113,9 +113,10 @@ To apply a theme color to a Window or Dialog component:
private string GetCssRuleForWindowThemeColor(string themeColor)
{
return
- $".window-{themeColor} .k-window-titlebar " + "{" +
- $" color: var(--kendo-color-on-{themeColor});" +
- $" background-color: var(--kendo-color-{themeColor});" +
+ $".window-{themeColor} .k-window-titlebar" +
+ "{" +
+ $"color: var(--kendo-color-on-{themeColor});" +
+ $"background-color: var(--kendo-color-{themeColor});" +
"}";
}