How to Change Variable Modes in Figma and Build Dark Mode

A mode is a column of values in a collection. Every variable in the collection has one value per mode, so surface/default might be white in Light and near-black in Dark. When you set a frame to Dark, every layer bound to that collection picks up the Dark value. Layers with raw hex fills don't change, which is why binding matters more than the modes themselves.

You add modes with New variable mode or by right-clicking a mode and choosing Duplicate mode, which copies all values as a starting point. If the collection doesn't exist yet, start with how to create variables in Figma.

It depends on your plan: Professional allows 10 modes per collection and Organization allows 20. Enterprise has no fixed limit through extended collections. We couldn't confirm the Starter limit in Figma's current docs, so check the mode menu in your own file if you're on the free plan.

• Frame or layer: select it, then Appearance → Apply variable mode → pick the collection's mode.
• Whole page: deselect everything, then set the mode in the Page section of the right sidebar.
• Children: the default is Auto, which inherits from the parent. Set a child explicitly only when it must stay in one mode, such as a dark footer on a light page.

To change what a variable looks like everywhere, edit its value in the Variables view for the mode you want. Every bound layer updates. To change which variable a single layer uses, use Apply styles and variables in the Fill or Stroke section and pick another variable, or hover it and click Detach variable to go back to a raw color.

A color variable holds a single color, but you can apply color variables to the individual stops of a gradient. Select the layer, click the fill swatch, switch to the gradient type, select a stop in the Stops list and apply a variable to it. With Light and Dark values on each stop variable, the gradient follows the mode.

1. A library variable is outdated or unpublished. A Figma forum thread traces failed mode switches to this. Publish the library changes and accept the update in the file that uses it.
2. A mode is set explicitly lower down. A mode set on an object applies to it and its nested children, whatever the page or parent says. Reset those layers to Auto.
3. Layers aren't bound to variables. Raw hex values and detached variables stay the same in every mode.
4. The layer uses a different collection. Switching Theme to Dark only affects variables in the Theme collection, not a separate Brand or Primitives collection.

Set variable mode changes the mode for the current page, and it changes objects whose mode is set to Auto. Figma's help center adds that "any mode explicitly defined on an object will still be used for itself and any nested children, regardless of the page level mode." So if you set frames to Light by hand while designing, the prototype toggle can't move them. Set top-level frames to Auto and let the page mode drive the theme.

Some designers on the forum report components staying in Light mode in presentation even when the file looks right, with no public fix; Figma support asked them to send the file for investigation. If resetting modes to Auto doesn't help, that's the route. For boolean toggles that don't switch themes, see toggling boolean variables.

Publishing the collection in a library is the standard way to reuse Light and Dark themes. For a one-off copy between files, export the modes as JSON (see how to export Figma variables) or use a plugin that moves whole collections with their modes matched by name.