diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index 44f8d222e5..0a5e2a6702 100644 --- a/knowledge-base/change-theme-runtime.md +++ b/knowledge-base/change-theme-runtime.md @@ -43,7 +43,12 @@ The following algorithm follows the commonly used approach to replace a CSS file ``` -1. Implement a JavaScript function that [creates](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) a `` 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 `` 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 `` 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 `` 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 `` 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 `` 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 ``` @@ -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). >