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

1
style.getVariableMode(
2
    collection: {{VARIABLE_COLLECTION}}, 
3
    options?: {
4
      breakpointId?: {{BREAKPOINT_ID}},
5
      pseudoStateKey?: {{PSEUDO_STATE_KEY}}
6
    }
7
): Promise<{{VARIABLE_MODE}} | null>

Parameters

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

  • BreakpointId: Identifies the responsive breakpoint to get styles for.

    1
    type BreakpointId = "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny"

  • PseudoStateKey: Specifies a CSS pseudo-class to get styles for.

    1
    type PseudoStateKey = "noPseudo" | "nth-child(odd)" | "nth-child(even)" | 
    2
      "first-child" | "last-child" | "hover" | "active" | "pressed" | 

Returns

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

Example

1
// Get Selected Element
2
const 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
}

Designer ability