Skip to content

Commit 4d00d59

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
Merge window-themecolor-3791 into production (#3792)
* kb(Window): Show how to set ThemeColor with Class * Update knowledge-base/window-themecolor.md --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 8666026 commit 4d00d59

2 files changed

Lines changed: 137 additions & 2 deletions

File tree

‎knowledge-base/window-themecolor.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
---
2+
title: Apply Window ThemeColor
3+
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.
4+
type: troubleshooting
5+
page_title: How to Apply ThemeColor to Blazor Dialog and Window
6+
meta_title: How to Apply ThemeColor to Blazor Dialog and Window
7+
slug: window-kb-themecolor
8+
tags: telerik, blazor, window, styles
9+
ticketid: 1716488
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Window for Blazor, <br /> Dialog for Blazor</td>
20+
</tr>
21+
<tr>
22+
<td>Version</td>
23+
<td>14.0.0 and above</td>
24+
</tr>
25+
</tbody>
26+
</table>
27+
28+
## Description
29+
30+
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.
31+
32+
## Cause
33+
34+
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.
35+
36+
## Solution
37+
38+
To apply a theme color to a Window or Dialog component:
39+
40+
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.
41+
````CSS.skip-repl
42+
.window-primary .k-window-titlebar {
43+
color: var(--kendo-color-on-primary);
44+
background-color: var(--kendo-color-primary);
45+
}
46+
````
47+
1. Set the respective custom CSS class (for example, `window-primary`) to the Window or Dialog `Class` parameter.
48+
````RAZOR.skip-repl
49+
<TelerikWindow Class="window-primary" />
50+
````
51+
52+
>caption Set Dialog and Window theme color with CSS
53+
54+
````RAZOR
55+
<TelerikWindow @bind-Visible="@WindowVisible"
56+
Class="@($"window-{ThemeColor}")"
57+
Width="400px">
58+
<WindowActions>
59+
<WindowAction Name="Minimize" />
60+
<WindowAction Name="Maximize" />
61+
<WindowAction Name="Close" />
62+
</WindowActions>
63+
<WindowTitle>
64+
Window Title
65+
</WindowTitle>
66+
<WindowContent>
67+
<p>Apply theme color:</p>
68+
<TelerikRadioGroup Data="@ThemeColors"
69+
@bind-Value="@ThemeColor"
70+
Layout="@RadioGroupLayout.Vertical" />
71+
</WindowContent>
72+
</TelerikWindow>
73+
74+
<TelerikDialog @ref="@DialogRef"
75+
Class="@($"window-{ThemeColor}")"
76+
@bind-Visible="@DialogVisible"
77+
Width="400px">
78+
<DialogTitle>Dialog Title</DialogTitle>
79+
<DialogContent>
80+
<p>Apply theme color:</p>
81+
<TelerikRadioGroup Data="@ThemeColors"
82+
@bind-Value="@ThemeColor"
83+
Layout="@RadioGroupLayout.Vertical"
84+
OnChange="@(() => { DialogRef!.Refresh(); })" />
85+
</DialogContent>
86+
</TelerikDialog>
87+
88+
<style>
89+
@foreach (var themeColor in ThemeColors)
90+
{
91+
@GetCssRuleForWindowThemeColor(themeColor)
92+
}
93+
</style>
94+
95+
<TelerikButton OnClick="@(() => WindowVisible = true)"
96+
Visible="@(!WindowVisible && !DialogVisible)">
97+
Open Window
98+
</TelerikButton>
99+
100+
<TelerikButton OnClick="@(() => DialogVisible = true)"
101+
Visible="@(!DialogVisible && !WindowVisible)">
102+
Open Dialog
103+
</TelerikButton>
104+
105+
@code {
106+
private readonly string[] ThemeColors = new string[] { "primary", "secondary", "tertiary", "inverse", "info", "success", "warning", "error" };
107+
private string ThemeColor { get; set; } = string.Empty;
108+
109+
private TelerikDialog? DialogRef;
110+
private bool DialogVisible { get; set; }
111+
private bool WindowVisible { get; set; } = true;
112+
113+
private string GetCssRuleForWindowThemeColor(string themeColor)
114+
{
115+
return
116+
$".window-{themeColor} .k-window-titlebar" +
117+
"{" +
118+
$"color: var(--kendo-color-on-{themeColor});" +
119+
$"background-color: var(--kendo-color-{themeColor});" +
120+
"}";
121+
}
122+
123+
protected override void OnInitialized()
124+
{
125+
ThemeColor = ThemeColors[0];
126+
127+
base.OnInitialized();
128+
}
129+
}
130+
````
131+
132+
## See Also
133+
134+
* [Dialog Overview](slug:dialog-overview)
135+
* [Window Overview](slug:window-overview)

‎upgrade/breaking-changes/14-0-0.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ The following values of the `ThemeColor` parameter are removed from the followin
9090
The `ThemeColor` parameter is removed from:
9191

9292
* Card. See how to [use the `Class` parameter to apply theme colors to Cards](slug:card-kb-replace-themecolor-parameter).
93-
* Dialog
94-
* Window
93+
* Dialog. See how to [use the `Class` parameter instead](slug:window-kb-themecolor).
94+
* Window. See how to [use the `Class` parameter instead](slug:window-kb-themecolor).
9595
* Popup edit settings
9696

9797
### OverlayThemeColor Parameter

0 commit comments

Comments
 (0)