Skip to content

Commit ecc259e

Browse files
kb(common): Enhance Theme Change KB (#2632)
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 1533ff5 commit ecc259e

File tree

1 file changed

+7
-2
lines changed

1 file changed

+7
-2
lines changed

knowledge-base/change-theme-runtime.md

+7-2
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,12 @@ The following algorithm follows the commonly used approach to replace a CSS file
4343
<link id="telerik-theme" rel="stylesheet"
4444
href="https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-main.css" />
4545
```
46-
1. Implement a JavaScript function that [creates](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) a `<link>` element with the new theme and [appends](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) it to the page. [Remove](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild) the old `<link>` element when the new one [loads](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event). Use the chosen `id` value with both `<link>` tags. [Notify the Razor component](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) when the new CSS file is loaded, if you need to make additional changes to the UI.
46+
1. Implement the supporting JavaScript code in a new or existing `.js` file.
47+
* Create a JavaScript function that [creates](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) a `<link>` element with the new theme URL and [appends](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) it to the page.
48+
* [Remove](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild) the old `<link>` element when the new one [loads](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event).
49+
* Use the chosen `id` value with both `<link>` tags.
50+
* [Notify the Razor component](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript) when the new CSS file is loaded, if you need to make additional changes to the UI.
51+
* Make sure the JavaScript file is loaded in the app.
4752
4853
>caption JavaScript
4954
```
@@ -72,7 +77,7 @@ The following algorithm follows the commonly used approach to replace a CSS file
7277
document.getElementsByTagName("head")[0].appendChild(newLink);
7378
}
7479
```
75-
1. Implement UI that triggers the JavaScript theme change. After the new CSS theme is loaded, refresh all Telerik components that use SVG or Canvas rendering, such as BarCodes, Charts, Gauges, and QR Codes.
80+
1. Implement UI that triggers the JavaScript theme change. After the new CSS theme is loaded, refresh all Telerik components that use SVG or Canvas rendering, such as Barcodes, Charts, Gauges, and QR Codes.
7681
7782
> Make sure [the version number in the theme URL is compatible with the version of Telerik UI for Blazor]({%slug themes-overview%}#compatibility-and-maintenance).
7883
>

0 commit comments

Comments
 (0)