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.

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.

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

Swatch CDN
Default Main https://cdn.kendostatic.com/themes/5.8.0/default/default-main.css
Default Main Dark https://cdn.kendostatic.com/themes/5.8.0/default/default-main-dark.css
Default Ocean Blue https://cdn.kendostatic.com/themes/5.8.0/default/default-ocean-blue.css
Default Blue https://cdn.kendostatic.com/themes/5.8.0/default/default-blue.css
Default Green https://cdn.kendostatic.com/themes/5.8.0/default/default-green.css
Default Nordic https://cdn.kendostatic.com/themes/5.8.0/default/default-nordic.css
Default Orange https://cdn.kendostatic.com/themes/5.8.0/default/default-orange.css
Default Purple https://cdn.kendostatic.com/themes/5.8.0/default/default-purple.css
Default Turquoise https://cdn.kendostatic.com/themes/5.8.0/default/default-turquoise.css
Default Urban https://cdn.kendostatic.com/themes/5.8.0/default/default-urban.css

Bootstrap

Swatch CDN
Bootstrap Main https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-main.css
Bootstrap Main Dark https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-main-dark.css
Bootstrap 3 https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-3.css
Bootstrap 3 Dark https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-3-dark.css
Bootstrap 4 https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-4.css
Bootstrap 4 Dark https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-4-dark.css
Bootstrap Nordic https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-nordic.css
Bootstrap Turquoise https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-turquoise.css
Bootstrap Turquoise Dark https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-turquoise-dark.css
Bootstrap Urban https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-urban.css
Bootstrap Vintage https://cdn.kendostatic.com/themes/5.8.0/bootstrap/bootstrap-vintage.css

Material

Swatch CDN
Material Main https://cdn.kendostatic.com/themes/5.8.0/material/material-main.css
Material Main Dark https://cdn.kendostatic.com/themes/5.8.0/material/material-main-dark.css
Material Aqua Dark https://cdn.kendostatic.com/themes/5.8.0/material/material-aqua-dark.css
Material Arctic https://cdn.kendostatic.com/themes/5.8.0/material/material-arctic.css
Material Burnt Teal https://cdn.kendostatic.com/themes/5.8.0/material/material-burnt-teal.css
Material Eggplant https://cdn.kendostatic.com/themes/5.8.0/material/material-eggplant.css
Material Lime https://cdn.kendostatic.com/themes/5.8.0/material/material-lime.css
Material Lime Dark https://cdn.kendostatic.com/themes/5.8.0/material/material-lime-dark.css
Material Nova https://cdn.kendostatic.com/themes/5.8.0/material/material-nova.css
Material Pacific https://cdn.kendostatic.com/themes/5.8.0/material/material-pacific.css
Material Pacific Dark https://cdn.kendostatic.com/themes/5.8.0/material/material-pacific-dark.css
Material Sky https://cdn.kendostatic.com/themes/5.8.0/material/material-sky.css
Material Sky Dark https://cdn.kendostatic.com/themes/5.8.0/material/material-sky-dark.css
Material Smoke https://cdn.kendostatic.com/themes/5.8.0/material/material-smoke.css

Fluent

Swatch CDN
Fluent Main https://cdn.kendostatic.com/themes/5.8.0/fluent/fluent-main.css
In this article