# Using Variable Modes
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.
## 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:
1. In the [toolbar](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#themebuilder-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](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables#editing-the-theme-styles) and select the drop-down 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](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-modes#using-the-project-settings).
* [By using the options in the **THEME STYLES** pane](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-modes#using-the-theme-styles-pane).
### Using the Project Settings
To create variables that have multiple modes:
1. In the [toolbar](https://www.telerik.com/themebuilder/documentation/get-started/quick-tour#themebuilder-toolbar), click the **Project Settings** button to open the settings dialog.
2. In the **Variables** section, select either **Colors** or **Metrics**.
3. In the combo box, select a category for the new variable.
4. Select **Create Variable**.
> tip 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:
1. Go to the [STYLES pane](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables#editing-the-theme-styles) 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](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package) 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:
1. Export both modes.
2. Copy the files inside the `css` folders and paste them into your application.
3. 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.
> caution Since the ThemeBuilder styles for each mode are intended to be loaded dynamically, [using the ThemeBuilder SCSS output as an NPM package](https://www.telerik.com/themebuilder/documentation/using-exported-styles/exported-package#using-the-themebuilder-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.
## Related Articles
* [Using Variables](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variables)
* [Variable Types in ThemeBuilder](https://www.telerik.com/themebuilder/documentation/building-visual-styles/variable-types)
* [How to Manage Color Palettes](https://www.telerik.com/themebuilder/documentation/building-visual-styles/tutorials/manage-color-palettes)