Theme Swatches
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:
Basics
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 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.
Built-in themes and swatches list
Here is a complete list of the base themes, all available swatches and their CDN URLs in a dedicated Themes CDN.
Default - These are the mostly ported swatches from our ThemeBuilder.
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.
Material - Based on Material Design. Main is our "Material" theme, which itself is built around the initial theme of material.angular.io.
Fluent - Based on Microsoft Fluent UI.
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.
Default
Bootstrap
| Swatch | CDN |
|---|---|
| Bootstrap Main | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-main.css |
| Bootstrap Main Dark | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-main-dark.css |
| Bootstrap 3 | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-3.css |
| Bootstrap 3 Dark | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-3-dark.css |
| Bootstrap 4 | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-4.css |
| Bootstrap 4 Dark | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-4-dark.css |
| Bootstrap Nordic | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-nordic.css |
| Bootstrap Turquoise | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-turquoise.css |
| Bootstrap Turquoise Dark | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-turquoise-dark.css |
| Bootstrap Urban | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-urban.css |
| Bootstrap Vintage | https://cdn.kendostatic.com/themes/6.3.0/bootstrap/bootstrap-vintage.css |
Material
Fluent
| Swatch | CDN |
|---|---|
| Fluent Main | https://cdn.kendostatic.com/themes/6.3.0/fluent/fluent-main.css |