From 8201473b27178e70f637766306d948b9f624bd7a Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 13:58:37 +0200 Subject: [PATCH 1/7] docs(Common): Document the k-body CSS class --- knowledge-base/change-theme-runtime.md | 1 + 1 file changed, 1 insertion(+) diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index d52271abe9..0743f88b84 100644 --- 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 a `k-body` CSS class to the root HTML element of your app, which is normally the ``. The CSS class can apply text color and background color to generic web content and is especially important when using dark Telerik themes. 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). From 3851d27646dffc886dadfa265edcb71d9544c782 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:02:05 +0200 Subject: [PATCH 2/7] Update overview.md --- styling-and-themes/overview.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index 02f7bc212e..ae7f8bdd40 100644 --- 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 `` of the web page. The exact project file that contains the `` 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 `` of the web page. The exact project file that contains the `` 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 HTML element of your app, which is normally the ``. This class applies the correct text color and background color styles 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. From 191f0cacb3257bd9790d2ca97e4e9174000a4f6f Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:03:09 +0200 Subject: [PATCH 3/7] Update knowledge-base/change-theme-runtime.md --- knowledge-base/change-theme-runtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index 0743f88b84..a49cc8d148 100644 --- a/knowledge-base/change-theme-runtime.md +++ b/knowledge-base/change-theme-runtime.md @@ -77,7 +77,7 @@ The following algorithm follows the commonly used approach to replace a CSS file document.getElementsByTagName("head")[0].appendChild(newLink); } ```` -1. Set a `k-body` CSS class to the root HTML element of your app, which is normally the ``. The CSS class can apply text color and background color to generic web content and is especially important when using dark Telerik themes. +1. Set the `k-body` CSS class to the root HTML element of your app, which is normally the ``. This class applies the correct text color and background color styles to generic web content and is especially important when using dark theme swatches. 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). From 8ffa7113f299f5374793d5d15447685f0dcaffaa Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:22:43 +0200 Subject: [PATCH 4/7] Update styling-and-themes/overview.md --- styling-and-themes/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index ae7f8bdd40..686f4a66c7 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -61,7 +61,7 @@ You can explore and compare the built-in theme swatches on the [live Telerik UI To register a theme: * Reference its stylesheet in the `` of the web page. The exact project file that contains the `` 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 HTML element of your app, which is normally the ``. This class applies the correct text color and background color styles to generic web content and is especially important when using dark theme swatches. +* Set the `k-body` CSS class to the root HTML element of your app, which is normally the ``. 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. From fa944c446ad547424b32a109375ecf3bb6f93d12 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:22:59 +0200 Subject: [PATCH 5/7] Update knowledge-base/change-theme-runtime.md --- knowledge-base/change-theme-runtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index a49cc8d148..eb5b8fbd78 100644 --- a/knowledge-base/change-theme-runtime.md +++ b/knowledge-base/change-theme-runtime.md @@ -77,7 +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 root HTML element of your app, which is normally the ``. This class applies the correct text color and background color styles to generic web content and is especially important when using dark theme swatches. +1. Set the `k-body` CSS class to the root HTML element of your app, which is normally the ``. This class applies default text color and background color to generic web content and is especially important when using dark theme swatches. 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). From 5e3d8c05c0381418aba82824236e148f1cb0fc99 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:24:17 +0200 Subject: [PATCH 6/7] Update knowledge-base/change-theme-runtime.md --- knowledge-base/change-theme-runtime.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index eb5b8fbd78..7d6ae37923 100644 --- a/knowledge-base/change-theme-runtime.md +++ b/knowledge-base/change-theme-runtime.md @@ -77,7 +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 root HTML element of your app, which is normally the ``. This class applies default text color and background color to generic web content and is especially important when using dark theme swatches. +1. [Set the `k-body` CSS class to the `` 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). From 847423def4b274568c25d13f44aab671d7be41bc Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:25:09 +0200 Subject: [PATCH 7/7] Update styling-and-themes/overview.md --- styling-and-themes/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index 686f4a66c7..38177da2f0 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -61,7 +61,7 @@ You can explore and compare the built-in theme swatches on the [live Telerik UI To register a theme: * Reference its stylesheet in the `` of the web page. The exact project file that contains the `` 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 HTML element of your app, which is normally the ``. This class applies default text color and background color to generic web content and is especially important when using dark theme swatches. +* Set the `k-body` CSS class to the root container of your app, which is normally the `` 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.