kb(common): Enhance Theme Change KB

Author: dimodi

knowledge-base/change-theme-runtime.md

@@ -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
     ```
@@ -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).
     >