Telerik UI for Blazor comes with three built-in (base) themes. Each of them provides a set of color swatches that you can choose from to match your application appearance and styling.
In this article:
The theme swatches are different color variations of the base themes. While they use the same variables as the built-in theme they accompany, they have different color values to deliver a variety of shades for the Telerik components.
You can explore the swatches in our live demos. The
Change Theme dropdown provides a list of the most common swatches. To test how all the available swatches affect the appearance of the Telerik UI for Blazor components, you might check the Sass Themebuilder. It also provides option for customizing the existing themes if needed.
In addition, Telerik UI for Blazor distributes some swatches via several other resources. Read more in the Swatch Distribution article.
Here is a complete list of the base themes, all available swatches and their CDN URLs in a dedicated Themes CDN.
Bootstrap - Main swatch is the current "Bootstrap" theme, which is built on Bootstrap 5. As the other names suggest, Bootstrap 3 and Bootstrap 4 swatches are color swatches adapted to look like the respective versions.
Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our release notes provide theme compatibility information for each UI for Blazor version. You can also use a newer theme version, if it doesn't contain breaking changes and has a fix that you need.
We distribute the most commonly used swatches in a separate Telerik Blazor CDN. The CDN URLs contain the Telerik UI for Blazor version. Thus, you do not need to manually track the theme compatibility, just make sure to use the CDN URL including your UI for Blazor version.
|Bootstrap Main Dark||https://cdn.kendostatic.com/themes/5.4.0/bootstrap/bootstrap-main-dark.css|
|Bootstrap 3 Dark||https://cdn.kendostatic.com/themes/5.4.0/bootstrap/bootstrap-3-dark.css|
|Bootstrap 4 Dark||https://cdn.kendostatic.com/themes/5.4.0/bootstrap/bootstrap-4-dark.css|
|Bootstrap Turquoise Dark||https://cdn.kendostatic.com/themes/5.4.0/bootstrap/bootstrap-turquoise-dark.css|