Customization
You can customize the appearance of Telerik UI components using different approaches. Each is suitable for specific scenarios and business requirements. This article describes the pros and cons, and compares all CSS customization alternatives.
- Create custom themes with the Progress ThemeBuilder
- Override theme variables
- Override theme styles
- Use CSS Utilities
- Build custom themes manually
- Load a custom theme in your app
When you use custom themes for the components, you must recreate the custom theme every time you update the Telerik UI for ASP.NET Core version in your application. This ensures compatibility and allows you to get the theme updates and fixes.
Using ThemeBuilder
ThemeBuilder is a web application that enables you to create new custom themes by changing the styles of existing built-in themes. Every change that you make is visualized instantly. Once you are done styling the UI components, you can export a ZIP file with the desired styles and add the custom theme to your app.
The ThemeBuilder allows different customization capabilities, depending on the used tier.
Setting Theme Variables
Each theme defines the same collection of variables, but with different values. For example, here are the Default theme variables. You can override the theme variable values outside the theme CSS file. In this way, you can customize the appearance of the Telerik UI components without the need to create and maintain a full custom theme.
This approach is supported starting with theme version 8.0.0 and Telerik UI for ASP.NET Core version 2024.2.514 (2024 Q2). Upgrading the Telerik UI components does not require any additional steps with regard to the CSS code, unless the CSS variable names contains breaking changes in the CSS variable names.
The example below shows how to customize some of the theme variables.
Override theme variables
<style>
:root {
--kendo-color-base: #ddf;
--kendo-color-base-hover: #eef;
--kendo-color-base-active: #ccf;
--kendo-color-on-base: #00c;
--kendo-color-primary: #c00;
--kendo-color-primary-hover: #c66;
--kendo-color-primary-active: #900;
--kendo-color-on-primary: #fee;
--kendo-border-radius-md: 1rem;
--kendo-font-size: 18px;
}
</style>
<p><label>Apply Custom Theme Variables</label></p>
@(Html.Kendo().CheckBox().Name("checkBox1").Checked(true).Label("Is Active"))
@(Html.Kendo().Button()
.Name("baseTextButton")
.Content("Base Button")
)
@(Html.Kendo().Button()
.Name("primaryTextButton")
.ThemeColor(ThemeColor.Primary)
.Content("Primary Button")
)
@addTagHelper *, Kendo.Mvc
<style>
:root {
--kendo-color-base: #ddf;
--kendo-color-base-hover: #eef;
--kendo-color-base-active: #ccf;
--kendo-color-on-base: #00c;
--kendo-color-primary: #c00;
--kendo-color-primary-hover: #c66;
--kendo-color-primary-active: #900;
--kendo-color-on-primary: #fee;
--kendo-border-radius-md: 1rem;
--kendo-font-size: 18px;
}
</style>
<p><label>Apply Custom Theme Variables</label></p>
<kendo-checkbox name="checkBox1" checked="true" label="Is Active"> </kendo-checkbox>
<kendo-button name="baseTextButton">
Base Button
</kendo-button>
<kendo-button name="primaryTextButton" theme-color="ThemeColor.Primary">
Primary Button
</kendo-button>
Overriding Theme Styles
You can override theme styles with custom CSS, no matter if the app is using a built-in or custom theme. This approach makes sense only for a relatively small number of customizations. Beyond that, choose some of the other alternatives on this page.
Upgrading may require changes to the additional custom CSS code, but only if there are breaking changes in the HTML output and styling.
Using CSS Utilities
The CSS Utilities allows you to create the desired layout using a collection of CSS classes. Each utility class changes the appearance of the target element by applying a specific CSS rule. For more information on the Telerik UI CSS Utilities and how to install the package, refer to the CSS Utilities documentation.
Building Themes From Source Code
The most complex and flexible way to use Telerik themes is to build them from the SASS source code in your development environment.
Each Theme Customization page in the Progress Design System documentation and the kendo-themes repository wiki provide more information about this process.
Loading Custom Themes
Custom themes are used in a similar way as the built-in themes. The notable differences are:
- The custom theme must reside in the
wwwrootfolder of the ASP.NET Core app or on a CDN provider. - You must recreate custom themes every time you update the Telerik UI for ASP.NET Core version.
Make sure that the application is loading only one Telerik theme at a time. If you are replacing a built-in theme with a custom theme, you must remove the <link> element of the built-in theme.