Skip to content

docs(Common): Document the k-body CSS class #3310

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 7 commits into from
Oct 28, 2025
Merged

docs(Common): Document the k-body CSS class #3310

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
59e0053
docs(Common): Document the k-body CSS class
dimodi Oct 28, 2025
8c57b89
Update overview.md
dimodi Oct 28, 2025
3c92111
Update knowledge-base/change-theme-runtime.md
dimodi Oct 28, 2025
535c76a
Update styling-and-themes/overview.md
dimodi Oct 28, 2025
c74a9d1
Update knowledge-base/change-theme-runtime.md
dimodi Oct 28, 2025
dfaddfc
Update knowledge-base/change-theme-runtime.md
dimodi Oct 28, 2025
cc01865
Update styling-and-themes/overview.md
dimodi Oct 28, 2025
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
1 change: 1 addition & 0 deletions knowledge-base/change-theme-runtime.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<body>`. 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).
Expand Down
5 changes: 4 additions & 1 deletion styling-and-themes/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 HTML element of your app, which is normally the `<body>`. 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.

Expand Down