The Kendo UI ThemeBuilder is a tool that lets you modify Kendo UI themes so that they match the look and feel of your website or application.
After adjusting the theme via the ThemeBuilder, click Download theme. This provides the following files:
kendo.custom.css—This is the custom theme for most widgets. You are able to use this theme instead of any
kendo.custom.json—The custom theme for charting widgets, the ones that use
Canvasrendering. Use the contents of this file to create a custom Chart theme and then set a custom theme name via the
kendo.custom.less—The LESS that includes the custom theme. Use this file if you want to compile the theme dynamically.
- Always register the common CSS file on the page, even when using ThemeBuilder-generated custom themes.
- Use the common CSS file, which corresponds to the Kendo UI theme that is used as a base for your custom theme. For example, if you have created a custom theme from the built-in Material theme, then register
- When deploying your themed application to an internal network, the images in the ThemeBuilder output are inferred from the page. If you are using the ThemeBuilder through the Kendo UI page, the images will be located on the Kendo UI CDN and may be blocked if your customers are within an internal network without access to the CDN. In such cases, copy the image resources locally and change the references in the CSS or LESS output.
The LESS output of the ThemeBuilder depends on the LESS files that are distributed along with the Kendo UI source, so make sure the file reference points to the existing files.
For the various ways to process the LESS output, refer to the official LESS documentation.
As of the Kendo UI Q2 2015 release Kendo UI introduced a new ThemeBuilder. It follows a notable CSS code overhaul, which made the themes more consistent and simpler to implement and to customize. The new ThemeBuilder does not provide an import functionality. Kendo UI decided to drop this feature because it cannot be implemented to be as good and flexible as desired. Although it may not seem like the best option, it is recommended to recreate the custom themes after upgrading the Kendo UI version. This ensures that the generated CSS code is clean and includes all styles required by the new widgets or features.
The ThemeBuilder generates CSS, LESS, and JS code, which are compatible with the current official Kendo UI version. In case a custom theme for an older Kendo UI version is needed, implement it via manual coding or overrides.
Other articles on styling, appearance, and rendering of Kendo UI widgets: