Set variable mode on a style

style.setVariableMode(collection, mode, options?)

Apply a variable mode to a style. Each variable mode is associated with a variable collection. To apply a variable mode, you must provide the variable collection that belongs to the variable mode.


Syntax

1 setVariableMode(
2 collection: VariableCollection,
3 mode: VariableMode,
4 options?: BreakpointAndPseudo
5 ): Promise<null>;

Parameters

Returns

Promise<null>

A Promise that resolves to null.

Example

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement()
3
4 if (selectedElement?.styles) {
5 // Get Styles
6 const styles = await selectedElement.getStyles()
7 const primaryStyle = styles[0] // Get the primary style
8
9 // Get Variable Collection
10 const variableCollection = await webflow.getDefaultVariableCollection()
11 const variableModes = await variableCollection?.getAllVariableModes()
12 const variableMode = variableModes[0]
13
14 // Set Variable Mode
15 if (primaryStyle && variableCollection) {
16 await primaryStyle.setVariableMode(variableCollection, variableMode)
17 console.log('Variable mode set successfully')
18 }
19}

Try this example

Designer ability

Designer AbilityLocaleBranchWorkflowSitemode
canModifyStyleBlocksAnyAnyCanvasDesign