Overview
Telerik UI for ASP.NET Core 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 more.
A theme is a collection of styles in a CSS file, which determine the appearance of the components, including fonts, colors, sizes, and layouts. For example, Default and Bootstrap are two built-in theme names.
Swatch
A theme swatch is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different. For example, Default Ocean Blue and Bootstrap Nordic are two built-in swatch names.
When the Telerik UI for ASP.NET Core 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 general term can imply any swatch of any theme.
The CSS file of any swatch is self-sufficient and contains all required styles for the components, except the optional font icon styles. You can switch the theme runtime, but the ASP.NET Core app must always load only one theme at a time.
Integration with the Telerik Components
The CSS themes represent an external dependency to Telerik UI for ASP.NET Core:
- The themes represent a separate product, which is used by multiple Telerik and Kendo UI products. Each Telerik UI for ASP.NET Core version is compatible with specific theme versions.
- The Telerik and Kendo UI Themes documentation is part of the Telerik Design System documentation. The content in the Telerik UI for ASP.NET Core documentation is introductory or specific only to the Telerik UI components.
- The Telerik and Kendo UI Themes have their own product development, roadmap and strategy. You can log public feature requests or bug reports on the Telerik Themes feedback portal.
Built-in Themes
The Themes - Get Started page lists the built-in themes in Telerik UI for ASP.NET Core and describes their unique specifics.
Comparing Themes and Swatches
You can explore and compare the built-in theme swatches on the live Telerik UI for ASP.NET Core demos. Use the Change Theme dropdown above each component example. To test how the available swatches affect the appearance of the components, you can also check the ThemeBuilder app. This tool provides the ability to customize the existing themes and swatches.
Using a Theme
To register a theme, you must reference its stylesheet in the <head> of the web page. Usually, this is the _Layout.cshtml file.
There are two ways to load a Telerik theme, in terms of physical CSS file location.
- Load a CSS theme as a local file in the
wwwrootfolder in the app. This option is relevant to the following cases:- When using themes from the Telerik UI for ASP.NET Core MSI installer or ZIP archive. The CSS files are in the
stylesfolder. - When using NPM to install a specific Telerik theme version.
- When using custom themes.
- When using themes from the Telerik UI for ASP.NET Core MSI installer or ZIP archive. The CSS files are in the
- Load a CSS theme from a remote URL, for example, CDN. The dedicated documentation of each theme provides a list of swatches and their URLs.
The ASP.NET Core app must load only one Telerik theme file at a time. Upgrade the theme with every Telerik UI for ASP.NET Core version upgrade.
Compatibility and Maintenance
The Telerik themes are decoupled from the Telerik UI components, which leads to the following usage requirements:
- When using a CSS theme as local file in
wwwroot, replace the file every time you change the Telerik UI for ASP.NET Core version. This includes apps created with the Telerik UI for ASP.NET Core Visual Studio extension without CDN support.
If you have an older version of the Telerik Extensions for Visual Studio and you want to create a new Telerik UI for ASP.NET Core project with version 2023.1.314 (R1 2023 SP1), or a newer version of the components, you must first update the Telerik Extension. To download and install the latest version of the Telerik Extensions, follow the Installing from Visual Studio Marketplace instructions.
- When loading theme swatches from a CDN, make sure that the theme version is compatible with the Telerik UI for ASP.NET Core version. Our release notes or compatibility table provide theme compatibility information for each components version. You can also use a newer minor theme version, which doesn't contain breaking changes. In other words, the latest major theme version may be still incompatible with the latest version of Telerik UI for ASP.NET Core.