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

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"