Swatch Distribution

Telerik UI for Blazor distributes the most commonly used swatches. While it is possiblle to get them from the Themes CDN, the Sass Theme Builder or the kendo-themes repository, this article lists a couple other ways of distribution.

In this article:

• Distributed Swatches
• Distribution Options
  • Telerik Blazor CDN
  • ZIP archive
  • Visual Studio and Visual Studio Code Wizards

Distributed Swatches

The following swatches are statistically most used, so we've included them in our live demos to allow easy testing. In addition, we are also distributing them via several resources.

Telerik UI for Blazor distributed swatches:

Default	Bootstrap	Material	Fluent
Main	Main	Main	Main
Main Dark	Main Dark	Arctic
Ocean Blue	Nordic	Nova
Nordic	Urban	Lime Dark
Purple	Vintage	Main Dark
Turquoise

Distribution Options

The above listed swatches are distributed in several ways:

Telerik Blazor CDN

A dedicated Telerik UI for Blazor CDN hosts them in the swatches folder of the corresponding base theme. Below you will find a list of the distributed swatches and their CDN URLs.

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 your UI for Blazor version in the URL.

Default

Swatch	CDN
Main	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-main.css
Main Dark	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-main-dark.css
Ocean Blue	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-ocean-blue.css
Nordic	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-nordic.css
Purple	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-purple.css
Turquoise	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-turquoise.css

Bootstrap

Swatch	CDN
Main	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/swatches/bootstrap-main.css
Main Dark	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/swatches/bootstrap-main-dark.css
Nordic	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/swatches/bootstrap-nordic.css
Urban	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/swatches/bootstrap-urban.css
Vintage	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-bootstrap/swatches/bootstrap-vintage.css

Material

Swatch	CDN
Main	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-material/swatches/material-main.css
Arctic	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-material/swatches/material-arctic.css
Nova	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-material/swatches/material-nova.css
Lime Dark	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-material/swatches/material-lime-dark.css
Main Dark	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-material/swatches/material-main-dark.css

Fluent

Swatch	CDN
Main	https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-fluent/swatches/fluent-main.css

ZIP archive

One of the ways to install Telerik UI for Blazor is to use the ZIP Archive. Its styles folder contains all the above swatches. You can download it from your Telerik account. Here is more information about the ZIP Archive...

Visual Studio and Visual Studio Code Wizards

The Create New Project wizards for Visual Studio and Visual Studio Code allow you to select the desired theme/swatch for your application. The wizards provide the above list of common swatches.

Once you've created the project, the selected theme will be saved locally in the wwwroot/lib/blazor-ui/styles folder of the application. With this configuration, upgrading UI for Blazor requires you to replace this CSS file manually.