FISYCO

Public beta
The gapImpactHow it worksProductSecurity
BlogDocumentation
Sign in

Mode

A mode is one set of values for the same tokens, such as a light or a dark theme.

All terms

For example, bg.accent points at blue 500 in the light mode and blue 300 in the dark one, and components use the same name in both.

Modes in Figma

In Figma, modes belong to a variable collection. Each variable has a value per mode, and a page, section or frame can be set to show one of them. The number of modes per collection depends on the plan: a single mode on Starter, up to 10 on Professional, up to 20 on Organization and unlimited on Enterprise (Figma plans and features). Getting those values out of Figma is its own problem: how to ship Figma variables without an Enterprise plan.

Modes in code

The DTCG Format Module doesn't define modes; a companion Resolver Module 2025.10 describes working with tokens in several contexts, such as light and dark themes. Style Dictionary 5.5.5, for one, doesn't read it yet, so many setups keep one token file per mode, which is also how Figma's Export mode writes them. In CSS, each mode usually becomes a block of custom properties under its own selector:

:root {
  --bg-accent: var(--color-blue-500);
}

[data-theme="dark"] {
  --bg-accent: var(--color-blue-300);
}

In this setup, only the semantic tokens change between modes: the palette stays the same, and components never need to know which mode is active.

Where modes go wrong

Modes break when a component uses a primitive directly: color.blue.500 has no dark value, so the component stays light in dark mode. Using semantic tokens everywhere is what makes a mode switch complete.

  • Design token
  • Style Dictionary in practice: building light and dark CSS from token files.