> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/designer/reference/variable-modes/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# Variable Modes

> Learn how to create and manage variable modes with the Designer API.

Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be switched and applied across a site.

![Variable Modes](/_fern-img/5423fb175d908862510c828470828d7cb30aa612f2e3e3d3632534f44c7a04ae.webp)

## The base mode

Every collection has a **base mode** — the default set of values that variables fall back to when no other mode applies. It has the reserved ID `"base"` and, by default, the name `"Base mode"`.

You can work with the base mode like any other mode:

* Retrieve it by its reserved ID with [`collection.getVariableModeById("base")`](/designer/reference/get-variable-mode-by-id), or by its name with [`collection.getVariableModeByName()`](/designer/reference/get-variable-mode-by-name).
* Rename it with [`mode.setName()`](/designer/reference/set-variable-mode-name). Its ID stays `"base"` even after it's renamed.
* Find it in the list returned by [`collection.getAllVariableModes()`](/designer/reference/get-all-variable-modes).

The base mode can't be removed — calling [`mode.remove()`](/designer/reference/remove-variable-mode) on it rejects with a `VariableModeInvalid` error.

```typescript
// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Get the base mode by its reserved ID
const baseMode = await collection.getVariableModeById("base")
console.log(await baseMode?.getName()) // "Base mode"

// Rename the base mode — its ID stays "base"
await baseMode?.setName("Light")
```

## Create a variable mode

Create a variable mode for a specific collection using the [`collection.createVariableMode()` method](/designer/reference/create-variable-mode). You can create two types of variable modes:

* **Manual modes** are applied manually to elements or pages.
* **Automatic modes** are driven by a [breakpoint](https://help.webflow.com/hc/en-us/articles/33961300305811) and apply automatically at the matching screen size. Pass a `BreakpointId` when creating the mode.

```typescript
// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Create a manual variable mode
const darkMode = await collection.createVariableMode("Dark Mode")

// Create an automatic variable mode driven by the tablet breakpoint
const tabletMode = await collection.createVariableMode("Tablet", "medium")

```

## Manage a mode's breakpoint

Read the breakpoint that drives an existing mode with the [`mode.getBreakpoint()` method](/designer/reference/get-variable-mode-breakpoint), and change it with the [`mode.setBreakpoint()` method](/designer/reference/set-variable-mode-breakpoint). Use `setBreakpoint` to promote a manual mode to automatic, move an automatic mode to a different breakpoint, or demote it back to manual.

```typescript
// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Get a variable mode
const variableMode = await collection.getVariableModeByName("Tablet")

// Read the breakpoint that drives the mode
const breakpointId = await variableMode.getBreakpoint() // "medium"

// Move the automatic mode to a different breakpoint
await variableMode.setBreakpoint("small")

// Demote the mode back to a manual mode
await variableMode.setBreakpoint(null)
```

## Set a mode-specific value on a variable

Once you've created a variable mode, you can set a mode-specific value on a variable using the [`variable.set()` method](/designer/reference/set-variable-value).

To reset a mode-specific value back to the default base value, pass `null` when calling `variable.set()` along with the mode you want to reset.

```typescript

// Get the default variable collection
const collection = await webflow.getDefaultVariableCollection()

// Create variable for the collection with a default value
const colorVariable = await collection.createColorVariable("Body Text", "#ccc")

// Create a variable mode
const variableMode = await collection.createVariableMode("Dark Mode")

// Set a mode-specific value on the variables
await colorVariable.set("#FFF", {mode: variableMode})

// Reset the mode-specific value back to the default base value
await colorVariable.set(null, {mode: variableMode}) // This mode value is now "#ccc"

```

> Learn how to create and manage variable modes with the Designer API.

## Docs

- [Get all variable modes](https://developers.webflow.com/designer/reference/get-all-variable-modes.md): Learn how to get all variable modes.
- [Get variable mode by name](https://developers.webflow.com/designer/reference/get-variable-mode-by-name.md): Learn how to get a variable mode by its name.
- [Get variable mode by ID](https://developers.webflow.com/designer/reference/get-variable-mode-by-id.md): Learn how to get a variable mode by its ID.
- [Create variable mode](https://developers.webflow.com/designer/reference/create-variable-mode.md): Learn how to create a variable mode.
- [Remove variable mode](https://developers.webflow.com/designer/reference/remove-variable-mode.md): Learn how to remove a variable mode.
- [Get variable mode name](https://developers.webflow.com/designer/reference/get-variable-mode-name.md): Learn how to get the name of a variable mode.
- [Set variable mode name](https://developers.webflow.com/designer/reference/set-variable-mode-name.md): Learn how to set the name of a variable mode.
- [Get variable mode breakpoint](https://developers.webflow.com/designer/reference/get-variable-mode-breakpoint.md): Learn how to get the breakpoint that drives a variable mode.
- [Set variable mode breakpoint](https://developers.webflow.com/designer/reference/set-variable-mode-breakpoint.md): Learn how to set the breakpoint that drives a variable mode.