StylesManaging Variable Modes

Get variable mode

style.getVariableMode(VariableCollecton, options?)

Retrieve the variable mode applied to a style for a given variable collection. A collection can define multiple modes, but a style can have only one variable mode applied per collection.


Syntax

1style.getVariableMode(
2    collection: VariableCollection, 
3    options?: BreakpointAndPseudo
4): Promise<VariableMode | null>

Parameters

  • collection: VariableCollection - The variable collection of the variable mode.
  • options?: BreakpointAndPseudo - The breakpoint and pseudo state for the style.

Returns

A Promise that resolves to a VariableMode object or null if the variable mode isn’t found.

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 Mode
10    if (primaryStyle && variableCollection) {
11        const variableMode =
12        await primaryStyle.getVariableMode(variableCollection)
13        const variableModeName = await variableMode?.getName()
14        console.log(variableModeName)
15    }
16}

Try this example

Designer ability

Designer AbilityLocaleBranchWorkflowSitemode
canAccessCanvasAnyAnyAnyAny