There are two primarily two ways to create and use a custom theme. The first one is to use Kendo UI ThemeBuilder to modify the default colors of a theme of your choice. The builder will generate a CSS file which you can incorporate into your solution. That is all fine but if you decide that additional modifications are needed you will have to go through the whole process again.
The second approach is to actually build the custom theme yourself which puts you in control of the whole process and allows you to make modifications at will.
In this article I will cover the second approach. Also, this article deals with custom themes when working with Microsoft technologies. Subsequent articles will cover other technologies.
Please, feel free to download the companion sample solution available here, which will be used as a reference throughout the rest of the article.
There are several guiding principles when trying to build a theme:
- Theme should not be rebuilt constantly
- It should be easy to introduce theme changes
- It should be easy to incorporate the custom theme into your application
The other important folder is build. It contains a custom MSBuild script that packages the custom theme and makes it ready for use by the sample web project - MyApp.Web. In case you would like to replicate the same behavior in another project, you need to add the custom build script to the end of you theme project file.
In addition to that, it is preferred to enable the "compile on build" functionality of Web Compiler so that the theme is compiled on every build.
Whenever MyApp.KendoTHeme is build, the build process will copy all files in an output folder called Dist. This folder contains all required CSS files, fonts, textures, and images. To make things easy, the build process will also copy the files directly to the web project at MyApp.Web\Content\kendo . That way can directly use the latest version of your theme.
Customizing a theme
In general, custom themes are a product of two things - base theme plus a set of custom colors. The sample projects uses Bootstrap as a base and custom colors defined in kendo.custom.less. So, to change the appearance of all Kendo widgets in MyApp.Web, just modify the colors in kendo.custom.less and rebuild the theme project. That's it!
This is how the custom NVS Kendo theme looks like:
Of, course, choosing a different base theme is also supported but some additional steps are required:
- Update "@image-folder" in kendo.custom.less to the name of the respective theme - Fior, for example.
- Update "@import" in kendo.custom.less to the less file of the respective theme - type-fiori.less, for example.
- Update the "ThemeName" property in kendoTheme.targets to the name of the respective theme - Fiori, for example.
Once the files are updated, just rebuild the theme project and you are good to go.