04.May.17

Milan Nankov

Milan Nankov

Custom Kendo Theme using LESS and Web Compiler For Visual Studio

Kendo widgets are shipped with an array of built-in themes that work great for many project. However, more often than not there is a need to match the styling of Kendo components to specific guidelines provided by customers. In such situation, it is best to create a custom theme instead of trying to override the default styles by hand.

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.

Recommended Readings

I recommend getting acquainted with how Kendo theming functions before continuing with this article. Also, having a general understanding of Web Compiler will be great. 

Web Compiler Extension

The Infrastructure

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 best way to control how and when something is built is to create a separate project - that is the MyApp.KendoTheme in the sample solution. This project contains all required Kendo resources to produce a custom theme. All texture, less files, fonts, etc are contained in the styles folder. 

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.

Import Custom Theme Targets

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.

Compile on build - Web Compiler

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:
NVS Custom Kendo Theme

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.

Happy theming.

 

Need consulting on this topic?

Yes No

Thank You! We will be in touch.