Merge dimodi-patch-1-css-k-body-3310 into production (#3312)

github-actions[bot] · dimodi · web-flow · commit 3d10dd1f0159 · 2025-10-28T15:09:15.000+02:00
* docs(Common): Document the k-body CSS class

* Update overview.md

* Update knowledge-base/change-theme-runtime.md

* Update styling-and-themes/overview.md

* Update knowledge-base/change-theme-runtime.md

* Update knowledge-base/change-theme-runtime.md

* Update styling-and-themes/overview.md

---------

Co-authored-by: Dimo Dimov &lt;961014+dimodi@users.noreply.github.com&gt;
diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md
@@ -77,6 +77,7 @@ The following algorithm follows the commonly used approach to replace a CSS file
         document.getElementsByTagName("head")[0].appendChild(newLink);
     }
     ````
+1. [Set the `k-body` CSS class to the `<body>` element in your app](slug:themes-overview#using-a-theme).
 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).
diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md
@@ -58,7 +58,10 @@ You can explore and compare the built-in theme swatches on the [live Telerik UI
 
 ## Using a Theme
 
-To register a theme, you must reference its stylesheet in the `<head>` of the web page. The exact project file that contains the `<head>` tag depends on the .NET version and the Blazor application type. See our [Getting Started guides](slug:blazor-overview#getting-started) for more information.
+To register a theme:
+
+* Reference its stylesheet in the `<head>` of the web page. The exact project file that contains the `<head>` tag depends on the .NET version and the Blazor application type. See our [Getting Started guides](slug:blazor-overview#getting-started) for more information.
+* Set the `k-body` CSS class to the root container of your app, which is normally the `<body>` element. This class applies default text color and background color to generic web content and is especially important when using dark theme swatches.
 
 There are three ways to load a Telerik theme, in terms of physical CSS file location. Note that each option provides access to a different number of theme swatches.
 

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ The following algorithm follows the commonly used approach to replace a CSS file`
`77`	`77`	`document.getElementsByTagName("head")[0].appendChild(newLink);`
`78`	`78`	`}`
`79`	`79`	````
	`80`	+1. [Set the `k-body` CSS class to the `<body>` element in your app](slug:themes-overview#using-a-theme).
`80`	`81`	`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.`
`81`	`82`
`82`	`83`	`> 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).`