Skip to content

kb(common): Enhance Theme Change KB #2630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 13, 2024
Merged

kb(common): Enhance Theme Change KB #2630

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions knowledge-base/change-theme-runtime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,12 @@ The following algorithm follows the commonly used approach to replace a CSS file
<link id="telerik-theme" rel="stylesheet"
href="https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-main.css" />
```
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.
1. Implement the supporting JavaScript code in a new or existing `.js` file.
* 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.
* [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.
* Make sure the JavaScript file is loaded in the app.

>caption JavaScript
```
Expand Down Expand Up @@ -72,7 +77,7 @@ The following algorithm follows the commonly used approach to replace a CSS file
document.getElementsByTagName("head")[0].appendChild(newLink);
}
```
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.
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.

> 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).
>
Expand Down
Loading