Managing variable modes on styles

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

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

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 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
}