Remove variable modes

style.removeVariableModes(props, options)

Remove multiple variable modes from a style. Each variable mode is associated with a variable collection. To remove multiple variable modes, provide an array of variable mode objects.

Syntax

style.removeVariableModes(
    modes: Array<VariableModes>,
    options?: {
      breakpointId?: BreakpointId,
      pseudoStateKey?: PseudoStateKey
    }
): Promise<null>;

Parameters

• modes: Array<VariableMode> - An array of variable modes to remove.

• options?: BreakpointAndPseudo - An object t hat lets you filter properties by breakpoint and/or pseudo-state. (Optional)

  • 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" |
      "visited" | "focus" | "focus-visible" | "focus-within" |
      "placeholder" | "empty" | "before" | "after"

Returns

Promise<null>

A Promise that resolves to null.

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 Modes from Collection
const variableModes = await variableCollection?.getAllVariableModes()
const remove = await primaryStyle?.removeVariableModes(variableModes)
}

Designer ability