Using Variables

Creating and using variables in your ThemeBuilder project enables you to reuse values to easily style the UI components as required by the application design.

As each Kendo theme requires a different type (SASS or CSS) and a number of pre-defined variables, the default variables in the STYLES pane will vary depending on the selected base theme.

Using Color Swatches

For Telerik and Kendo UI based projects, the STYLES pane contains pre-defined variables that the selected Kendo theme uses. In addition, you can select a number of color variations that alter the Kendo theme. These color variations are called swatches and they are unique for each of the Kendo themes.

To select a color swatch, use the dedicated DropDown Button in the STYLES pane.

The available swatches in ThemeBuilder

Creating Variables

To create a new variable, follow these steps:

  1. Go to the STYLES pane and click on the + button right next to the category.

    Plus button right next a variable category.

  2. In the dialog, enter the desired values and click Create.

Editing Variables

To edit an existing variable:

  1. Locate the variable in the STYLES pane and click on it.
  2. Enter the updated values in the inputs and close the dialog.

Deleting Variables

To delete an existing variable:

  1. Locate the variable in the STYLES pane.
  2. Click on the menu button right next to the variable.

    Context menu of a variable.

  3. Click on Delete.

You can only delete custom-defined variables. Deleting variables that come by default from the Kendo themes is considered manipulating the theme instead of customizing it and is not encouraged.

In this article
Not finding the help you need?