diff --git a/knowledge-base/window-themecolor.md b/knowledge-base/window-themecolor.md new file mode 100644 index 000000000..85aec04d3 --- /dev/null +++ b/knowledge-base/window-themecolor.md @@ -0,0 +1,135 @@ +--- +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 + + + + + + + + + + + + +
ProductWindow for Blazor,
Dialog for Blazor
Version14.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