Using Variables and Variable Modes

Creating and using variables in your ThemeBuilder project enables you to easily style the UI components as required by the application design. In addition, you can utilize variable modes to assign different values to the very same variables and address common scenarios like dark mode for applications.

Using Variables

In the STYLES pane, you can create and edit a number of color, metric, typography, and effect variables to use them for customizing the UI components set.

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.

  

• To further customize the appearance of the UI components by using the STYLES pane:

  • Add new variables by using the + button.
  • Edit the values of the variables.

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

ThemeBuilder gives you the flexibility to use the SASS or CSS variables in the STYLES pane to change the appearance of the UI components by applying advanced styling strategies. To enable this functionality, use the Advanced Edit button.

Using Variable Modes

If your application needs multiple color modes or metrics, you must use different values for the same variables. Utilizing diverse variable modes allows you to address the needs of users with different preferences, for example, dark themes or larger fonts.

The following image shows a ThemeBuilder project with two variable modes (Light and Dark) and the variable values for each mode.

Creating Variable Modes

You can create modes for two types of variables:

• Color—They allow you to set alternative variable values for colors or palettes, for example, for the $kendo-color-primary variable. By adding modes for the color variables, you can create theme variations like Light, Dark, High Contrast, and so on.
• Metric—They allow you to set alternative variable values for the metrics, for example, for the $kendo-border-radius variable. By adding modes for the metric variables, you can create size variations for the UI components like Small, Medium, Large, and so on.

To create new variable modes in your ThemeBuilder project:

1. In the toolbar, click the Project Settings button to open the settings dialog.
2. In the Variables section, select either Colors or Metrics.
3. In the Name row, click the + to add a new variable mode.

Applying Variable Modes

When you create the first variable mode in your project, it will be applied to all variables from the corresponding type (metric or color).

To change the applied variable mode in your ThemeBuilder project:

1. Go to the THEME STYLES pane and select the DropDown button to access the available variable modes.

2. Select the desired metric and color mode.

   

Creating and Editing Variables when Using Modes

You can create new variables and change the variable values for each mode that you create in two ways:

• By using the Project Settings dialog.
• By using the options in the THEME STYLES pane.

Using the Project Settings

To create variables that have multiple modes:

1. In the toolbar, click the Project Settings button to open the settings dialog.
2. In the Variables section, select either Colors or Metrics.
3. In the ComboBox, select a category for the new variable.

4. Select Create Variable.

   

Creating a color variable in the Project Settings dialog automatically applies a solid color. To create a variable with a gradient color type, use the THEME STYLES pane.

In the Project Settings dialog, you can also:

• Delete a variable that you created. You cannot delete built-in theme variables, for example, $kendo-color-primary.

• Edit the values for all variable modes in a single step.

  

• Edit the properties of the variable: change its category, name, and description.

  

• Edit the value of a color variable by using the ComboBox to select another variable or enter a value.

  

Using the THEME STYLES pane

To edit a variable value from the THEME STYLES pane:

1. Go to the THEME STYLES pane and find the variable that you need to edit.

2. Apply the desired changes in the EDIT dialog.

   To apply the changes to all modes, activate the Apply to all color modes switch.

   

Exporting Styles When Using Modes

When you export styles from a project that uses variable modes, only the variables for the currently applied mode will be exported.

For example, if you define two color modes: Light and Dark. Then, for the $kendo-color-primary value, you set white and black for the color modes respectively:

• When you apply the Light mode, the exported SCSS/CSS output will have the value white for the $kendo-color-primary variable.
• When you apply Dark mode, the exported SCSS/CSS output will have the value black for the $kendo-color-primary variable.

To use both the Light and Dark component styles in your application, and to change them dynamically: 1. Export both modes. 1. Include them in your application and refer to the desired style based on your workflow.

• To apply the Light mode to your application, load the exported light CSS or SCSS styles.
• To apply the Dark mode to your application, load the exported dark CSS or SCSS styles.

Related Articles

• Applying Advanced Customizations
• Using Your Custom Fonts in ThemeBuilder