New to Telerik UI for Blazor? Download free 30-day trial

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. Any of the base themes and their swatches can be easily customized as desired - read more about that in the Custom Themes article.

You can find the built-in themes and their swatches in the following resources:

  • Sass Themebuilder - it is a web application that enables you to create new or customize existing themes. You can use it to explore how certain theme/swatch will affect the appearance of the Telerik UI for Blazor components.

  • kendo-themes repository - the repository for all themes and swatches that are used across Telerik and Kendo web components.

  • ZIP archive for Telerik UI for Blazor - the styles folder contains the base themes and a some of their most commonly used swatches. The ZIP Archive article provides more details on how to get the archive.

Buit-in themes and swatches list

Here is a complete list of the base themes, all available swatches and their CDN URLs.

  • Default - These are the mostly ported swatches from our Sass Themebuilder. Main swatch is the current "Default" theme.

  • 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.

Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our release notes provide information about the correct theme version for each UI for Blazor version.

Default

Bootstrap

Material

In this article
Not finding the help you need? Improve this article