For AI agents: a documentation index is available at the root level at /llms.txt and /llms-full.txt. Append /llms.txt to any URL for a page-level index, or .md for the markdown version of any page.
Resources
Get started
ReferenceGuidesExamplesChangelog
ReferenceGuidesExamplesChangelog
  • Designer API
    • Introduction
    • Getting Started
    • Webflow CLI
    • Error Handling
    • App Modes
  • Elements
    • Creating & Retrieving Elements
    • Element Properties & Methods
    • Element Types & Methods
  • Styles
    • Managing Style Properties
    • Managing Variable Modes
  • Components
  • Variables & Collections
    • Variable Collections
    • Variables
    • Variable Modes
  • Assets
  • Pages & Folders
  • Utilities
    • User Events & Notifications
    • App Intents & Connections
  • Additional Resources
    • API Playground
    • FAQs
LogoLogo
Resources
Get started
On this page
  • Create a variable mode
  • Set a mode-specific value on a variable
Variables & Collections

Variable Modes

Was this page helpful?
Previous

Get all variable modes

Next
Built with

Variable modes let you define multiple values for individual variables, creating distinct sets of values (“modes”) that can be switched and applied across a site.

Variable Modes

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 will be created as ‘manual’ modes.

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

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.

To reset a mode-specific value back to the default base value, pass null when calling variable.set() along with the mode you want to reset.

1// Get the default variable collection
2const collection = await webflow.getDefaultVariableCollection()
3
4// Create variable for the collection with a default value
5const colorVariable = await collection.createColorVariable("Body Text", "#ccc")
6
7// Create a variable mode
8const variableMode = await collection.createVariableMode("Dark Mode")
9
10// Set a mode-specific value on the variables
11await colorVariable.set("#FFF", {mode: variableMode})
12
13// Reset the mode-specific value back to the default base value
14await colorVariable.set(null, {mode: variableMode}) // This mode value is now "#ccc"