Styles

Managing variable modes on styles

Create flexible design systems using variable modes and styles

Use variable modes with styles to create multiple design themes programmatically. Variable modes let you define different values for the same variable, enabling you to switch between complete design systems like light and dark themes. This approach reduces variable management overhead and streamlines design workflows through the Designer API.

How variable modes work with styles

When you apply a variable mode to a style that uses variables, the applied variables inherit all variable values from that mode. This creates a unified design system where changes to the mode automatically update all dependent styles.

Creating and applying variable modes

1

Create a variable mode

Create a variable mode for a specific collection using the collection.createVariableMode() method. All variable modes created with the Designer API are created as ‘manual’ modes.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create a variable mode
5const darkMode = await collection.createVariableMode("Dark Mode")
2

Set a mode-specific value on a variable

Once you’ve created a variable mode, you can set a mode-specific value on a variable using the variable.set() method.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create variables for the default mode
5const primaryColor = await collection.createColorVariable("Primary Color", "#2563eb") // blue-600
6const secondaryColor = await collection.createColorVariable("Secondary Color", "#64748b") // slate-500
7const backgroundColor = await collection.createColorVariable("Background Color", "#ffffff") // white
8const accentColor = await collection.createColorVariable("Accent Color", "#f59e42") // orange-400
9
10// Set dark mode values for all variables
11await primaryColor.set("#3b82f6", {mode: darkMode}) // blue-500
12await secondaryColor.set("#94a3b8", {mode: darkMode}) // slate-400
13await backgroundColor.set("#0f172a", {mode: darkMode}) // slate-900
14await accentColor.set("#fb923c", {mode: darkMode}) // orange-400
3

Apply a variable mode to a style

Apply a variable mode to a style using the style.setVariableMode() method. 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.

1// Get Selected Element
2const selectedElement = await webflow.getSelectedElement()
3
4if (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 variableCollections = await webflow.getAllVariableCollections();
11    const collectionsByName = Object.fromEntries(
12        await Promise.all(
13            variableCollections.map(async col => [await col.getName(), col])
14        )
15    );
16    const variableCollection = collectionsByName['My Collection Name']
17
18    // Set Variable Mode
19    if (primaryStyle && variableCollection) {
20        await primaryStyle.setVariableMode(variableCollection, variableMode)
21        console.log('Variable mode set successfully')
22    }
23}
Set variable modes on primary styles

Currently, you can only set variable modes on primary styles. Variable modes aren’t supported for combo classes through the Designer API.