Variables & Collections

Variable Modes

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

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:

The base mode can’t be removed — calling mode.remove() on it rejects with a VariableModeInvalid error.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get the base mode by its reserved ID
5const baseMode = await collection.getVariableModeById("base")
6console.log(await baseMode?.getName()) // "Base mode"
7
8// Rename the base mode — its ID stays "base"
9await baseMode?.setName("Light")

Create a variable mode

Create a variable mode for a specific collection using the collection.createVariableMode() method. You can create two types of variable modes:

  • Manual modes are applied manually to elements or pages.
  • Automatic modes are driven by a breakpoint and apply automatically at the matching screen size. Pass a BreakpointId when creating the mode.
1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create a manual variable mode
5const darkMode = await collection.createVariableMode("Dark Mode")
6
7// Create an automatic variable mode driven by the tablet breakpoint
8const tabletMode = await collection.createVariableMode("Tablet", "medium")

Manage a mode’s breakpoint

Read the breakpoint that drives an existing mode with the mode.getBreakpoint() method, and change it with the mode.setBreakpoint() method. Use setBreakpoint to promote a manual mode to automatic, move an automatic mode to a different breakpoint, or demote it back to manual.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Get a variable mode
5const variableMode = await collection.getVariableModeByName("Tablet")
6
7// Read the breakpoint that drives the mode
8const breakpointId = await variableMode.getBreakpoint() // "medium"
9
10// Move the automatic mode to a different breakpoint
11await variableMode.setBreakpoint("small")
12
13// Demote the mode back to a manual mode
14await 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.

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.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create variable for the collection with a default value
5const colorVariable = await collection.createColorVariable("Body Text", "#ccc")
6
7// Create a variable mode
8const variableMode = await collection.createVariableMode("Dark Mode")
9
10// Set a mode-specific value on the variables
11await colorVariable.set("#FFF", {mode: variableMode})
12
13// Reset the mode-specific value back to the default base value
14await colorVariable.set(null, {mode: variableMode}) // This mode value is now "#ccc"