Styling and Themes

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

Built-in Themes

Telerik UI for Blazor comes with a set of built-in CSS themes that control the visual appearance of the components. Each theme determines the components' colors, borders, backgrounds, size, layout, position, font size and sometimes the font family. You can compare all themes and swatches on the Telerik UI for Blazor live demos.

Telerik UI for Blazor has the same HTML rendering and theme stylesheets as other Telerik and Kendo UI web products, so previous experience with them can be helpful. At the same time, the Telerik UI for Blazor components are native Blazor components and not wrappers around other Telerik products.

Theme Names

The following list describes the built-in themes in Telerik UI for Blazor:

Each theme can have built-in color variations called swatches. When this documentation talks about a given theme name, for example Default, this implies the Main swatch of this theme. In addition, the word "theme" as a standalone term can imply any swatch of any theme, or the CSS file of a theme.

Using a Theme

To register a theme, you must reference its stylesheet in the <head> the web page. The exact project file that contains the <head> tag depends on the .NET version and the Blazor application type. See our Getting Started guides for more information.

There are three ways to load a Telerik theme, in terms of physical CSS file location. Note that each option provides access to a different number of theme swatches.

The Blazor app must load only one Telerik theme file at a time.

Theme Version Compatibility and Maintenance

The Telerik themes are decoupled from the Telerik Blazor components, which leads to the following usage requirements:

Loading Themes from the NuGet Package

The easiest way to load a Telerik theme is to reference a static asset from the NuGet package. The .NET SDK will copy the CSS file to the output folder during build automatically. Static assets provide the following benefits:

  • The application relies on available local resources, instead of third parties and remote URLs.
  • The theme URL does not change across component versions, which makes product updates easier.

The Telerik.UI.for.Blazor NuGet package includes only the Main swatch of each theme and the Ocean Blue swatch of the Default theme. The code snippet below shows all available CSS files in the NuGet package and their correct URLs. To use another swatch, see the section Using a Theme above.

Load a Telerik theme as a static NuGet asset

<head>
    <!-- Choose only one theme. -->

    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />

    <!-- 
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/default-ocean-blue.css" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-material/all.css" rel="stylesheet" />
    <link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-fluent/all.css" rel="stylesheet" />
    -->
</head>

Trial users must add .Trial to the theme URL:

<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />

Changing Themes Runtime

The application can remove a loaded stylesheet from the page and register another one. See how to change the theme or swatch at runtime with step-by-step instructions and an example.

Bootstrap Notes

The Telerik Bootstrap theme has a similar design to the Bootstrap framework and it uses the Bootstrap metrics to integrate Telerik Blazor components in an application that already uses Bootstrap for layout and styles.

There are some important differences between the Bootstrap framework and the Telerik Bootstrap theme:

  • The two products are completely independent. They do not share CSS classes and code.
  • The Telerik Bootstrap theme does not require or depend on the Bootstrap framework stylesheet.
  • The Bootstrap framework stylesheet and the Telerik Bootstrap theme cannot be used interchangeably.

To use Bootstrap-styled Telerik components in a Bootstrap-styled app, you need to load both stylesheets. You can use Bootstrap to create layouts and then put Telerik components inside those layouts. You can use Bootstrap CSS classes and utilities on your own HTML elements in the markup regardless of the components inside.

Using Bootstrap CSS classes on Telerik components may lead to styling conflicts and is generally not necessary or recommended. Do not set the form-control Bootstrap CSS class on Telerik input components such as ComboBox, TextBox, and others.

You may want to avoid the Bootstrap framework and rely only on Telerik components for layout. In this case, explore and compare the layout components in Telerik UI for Blazor.

Material Notes

To apply the Material Design guidelines, the Blazor app should load and use the Roboto font family.

The Telerik Material theme does not include the Roboto font itself, because it is a third-party property. Instead, the Telerik Blazor components inherit their font family from the application, so if the app uses Roboto, the Telerik components will do so too.

One possible way to add the Roboto font from Google Fonts is:

<!-- Load the Roboto font file -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" />

<!-- Apply the Roboto font family globally -->
<style>
  body {
      font-family: Roboto, sans-serif;
    }
</style>

Built-in Theme Development

The CSS themes represent an external dependency to Telerik UI for Blazor. The themes are a separate product, which is used by all Telerik and Kendo UI web products. The themes have their own product roadmap and strategy. You can log bug reports and feature requests on the Telerik Themes feedback portal.

Next Steps

See Also

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