Webflow Designer API: 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

How to use variable modes

Create a variable mode

Create a variable mode for a specific collection using the collection.createVariableMode() method. All variable modes created with the Designer API will be created as ‘manual’ modes.

1 // Get the default variable collection
2 const collection = await webflow.getDefaultVariableCollection()
3 
4 // Create a variable mode
5 const variableMode = await collection.createVariableMode("Dark Mode")

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.

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

1	// Get the default variable collection
2	const collection = await webflow.getDefaultVariableCollection()
3
4	// Create a variable mode
5	const variableMode = await collection.createVariableMode("Dark Mode")

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