Theme Builder Overview
The Kendo UI Theme Builder is a web application which enables you to create new or customize existing themes.
The Theme Builder renders the same look and feel as all other components in the suite and delivers full control over their visual elements.
To use the Theme Builder:
- Create or customize your theme.
- Download the Theme Builder and integrate it in your project.
Creating New Themes
Complex Kendo UI components, such as the Grid, rely on other components to deliver their full set of features. The Theme Builder automatically updates the styling on all required components so that you do not need to customize each of them separately.
To create a new theme with the Theme Builder:
- Go to the Theme Builder application.
- Select the Start Theming option.
- Choose either of the Default or Bootstrap themes to serve as a starting point.

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 Editing
To edit an existing theme:
- Go to the Theme Builder application.
- Select Import Theme.
- 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. - Start customizing your theme by using the Theme Builder features your project requires.

Using the Themes in Your Project
When you complete the customization of the theme, you can start using it in your project:
Download the theme files by clicking the Download button.
Register the downloaded theme in your project:
To use the complete theme for all components, include the
all.css
file as precompiled CSS.To use the theme as SCSS, include the
variables.scss
file in the build process of your application:// import configuration from the theme builder @import 'variables.scss'; // import the base theme @import '~@progress/kendo-theme-default/dist/all.scss';
If you include the
bootstrap
framework from its source, make sure to includekendo-theme-bootstrap
and any ThemeBuilder output before you import thebootstrap
framework:@import "variables"; @import "~@progress/kendo-theme-bootstrap/dist/all.scss"; @import "~bootstrap/scss/bootstrap";