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

style.getVariableMode(
    collection: VariableCollection,
    options?: {
      breakpointId?: BreakpointId,
      pseudoStateKey?: PseudoStateKey
    }
): Promise<VariableMode | 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.

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

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

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

Returns

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

Example

// Get Selected Element
const selectedElement = await webflow.getSelectedElement()
    if (selectedElement?.styles) {
    // Get Styles
    const styles = await selectedElement.getStyles()
    const primaryStyle = styles[0] // Get the primary style
    // Get Variable Mode
    if (primaryStyle && variableCollection) {
        const variableMode =
        await primaryStyle.getVariableMode(variableCollection)
        const variableModeName = await variableMode?.getName()
        console.log(variableModeName)
    }
}

Designer ability