Customize Themes
You can customize the appearance of Kendo UI for Angular components in various ways. Each is suitable for specific scenarios and business requirements.
This article describes the pros and cons, and compares all CSS customization alternatives.
- Creating custom themes with the Progress ThemeBuilder
- Setting SASS and CSS Theme Variables
- Overriding Theme Styles
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 complete the styling of the UI components, you can export a ZIP file with the desired styles and add the custom theme to your Kendo UI for Angular app.
The ThemeBuilder allows different customization capabilities, depending on the used tier.
Setting SASS and CSS Theme Variables
Each Kendo UI theme defines the same collection of variables, but with different values. For example, here are the Default theme SASS variables. You have the ability to override theme variable values outside the CSS file of the theme. In this way, you can customize the appearance of the Kendo UI for Angular components without the need to create and maintain a full custom theme.
Each Theme Customization page in the Progress Design System Kit documentation provides more information about how to override the values of SASS and CSS variables for:
When overriding theme variable values, make sure that the .scss file containing the customizations is loaded in the angular.json file. The article on compiling SCSS files in your application provides more information about this process.
In version
8.0.0of the Kendo UI themes, a new Color System that brings a new way of implementing and customizing colors was introduced. For more details, refer to the Migration article in the Progress Design System Kit documentation.
Upgrading the Kendo UI for Angular components does not require any additional steps with regard to the CSS code, unless there are breaking changes in the CSS variable names.
The example below demonstrates how to customize some of the CSS variables.
Overriding Theme Styles
You can override theme styles with custom CSS, no matter if the app is using a built-in or a custom theme. This approach is suitable only for a relatively small number of customizations. For more extensive modifications, consider the alternative options presented 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.