Using Variable Modes

Updated on Feb 13, 2026

If your application needs multiple color or metric modes, you must use different values for the same variables. Using variable modes lets you address user 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.

Using Variable Modes in Progress ThemeBuilder

Creating Variable Modes

You can create modes for two types of variables:

Color: Lets you set alternative values for colors or palettes, for example, $kendo-color-primary. By adding color modes, you can create theme variations like Light, Dark, High Contrast, and more.
Metric: Lets you set alternative values for metrics, for example, $kendo-border-radius. By adding metric modes, you can create size variations like Small, Medium, Large, and more.

To create new variable modes in your ThemeBuilder project:

In the toolbar, click the Project Settings button to open the settings dialog.
In the Variables section, select either Colors or Metrics.
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:

Go to the THEME STYLES pane and select the dropdown button to access the available variable modes.
Select the desired metric and color mode.

Applying Variable Modes in Progress ThemeBuilder

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:

In the toolbar, click the Project Settings button to open the settings dialog.
In the Variables section, select either Colors or Metrics.
In the combo box, select a category for the new variable.
Select Create Variable.

Creating Variables in Progress ThemeBuilder

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 combo box to select another variable or enter a value.

Using the THEME STYLES Pane

To edit a variable value from the THEME STYLES pane:

Go to the STYLES pane and find the variable that you need to edit.
Apply the desired changes in the EDIT dialog.

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

Editing Progress ThemeBuilder Variables in the Theme Styles pane

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, and set the $kendo-color-primary value to white and black 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:

Export both modes.
Copy the files inside the css folders and paste them into your application.
Load them dynamically based on your workflow:

To apply the Light mode, load the exported Light theme CSS file.
To apply the Dark mode, load the exported Dark theme CSS file.

Since the ThemeBuilder styles for each mode are intended to be loaded dynamically, using the ThemeBuilder SCSS output as an NPM package is not feasible. This is because you need to know the path to the source CSS files to load them dynamically. You can either compile the SCSS output before using it or use the CSS output instead. The CSS output is automatically compiled from the SCSS by ThemeBuilder during the export.