Styling & Themes / Theme Builder / 

Theme Builder Overview

The Kendo UI Theme Builder is a web application which enables you to create new or customize existing themes.

It renders the same look and feel as the look and feel of all other components in the suite and delivers full control over their visual elements. After you create or customize your theme, you can download it and integrate it in your project.

Creating New Themes

To create a new theme:

  1. Go to the Theme Builder application.
  2. Select the Start Theming option.
  3. Choose one of the existing themes to serve as a starting point.
  4. Select the components which you intent to style. You can also change the selection at a later stage.

Complex Kendo UI components, such as the Grid, rely on other components to deliver their full set of features. If you select the Grid, then all of its components dependencies styles (Button, AutoComplete, DropDownList, DatePicker, etc.) will also be included in the final bundle. The Theme Builder automatically updates the styling on all required components so that you do not need to customize each of them separately.

Customizing Existing Themes

To customize an existing theme, use any of the styling options the Theme Builder delivers.

Available Options

  • Color pickers—Customize the appearance of the components.
  • The Apply changes instantly option—Enables you to observe the changes on the fly.
  • Manual updates of the component elements.
  • Predefined color swatches.
Theme Builder Create and Download 3

Theme Editing

To edit an existing theme:

  1. Go to the Theme Builder application.
  2. Select Import Theme.
  3. Upload the variables.scss file. It contains your current updates of the customized theme. As a result, the selected components and styling elements are loaded.
  4. Start customizing your theme by using the Theme Builder features your project requires.
Themebuilder import existing theme

Using the Themes in Your Project

When you finish customizing the theme, you can start using it in your project:

  1. Download the theme files by clicking the Download button.
  2. Register the downloaded theme in your project. Include the THEME_NAME.css file as precompiled CSS.

Suggested Links

Previous
Customizing Typography
Next
Design Files for Adobe XD

In this article

Not finding the help you need?

Contact Support