Variable Modes: Light and Dark

The quickest way to make dark mode is to duplicate every screen and recolor it by hand. It is also the quickest way to have two sets of screens that disagree within a month: someone adds a habit row to the light Today screen and forgets the dark one. In Steady, dark mode will be one switch on a frame, because the colors already point at meanings.

Modes are columns of values

Open your local variables (reached from the right sidebar with nothing selected, at the time of writing) and look at the Semantic collection. It has one column of values, named Mode 1 by default. Rename it Light, then add a mode and call it Dark. Every variable now has two values: one per column. Figma copies the existing values into the new column, which is a starting point, not an answer.

Fill in the Dark column by aliasing different primitives. Here is Steady’s mapping, with contrast measured against the surface each color sits on:

Keep the Primitives collection at one mode. A primitive is a fact (teal/700 is #0F766E); a semantic variable is a decision that depends on context. Modes belong to decisions.

Switching a screen

Duplicate the Today frame and select the copy. In the right sidebar, use the variable mode control (in the Appearance section at the time of writing), pick the Semantic collection and choose Dark. Every bound fill, stroke and text color on the screen swaps at once.

That works because of inheritance. Every layer starts on Auto, which means “use my parent’s mode”. Figma walks up the layer tree until it finds a parent with a mode set, and if none has one, it uses the collection’s default mode (the first column). You can also set a mode on a whole page with nothing selected.

Now the duplicate is not a copy you maintain; it is the same components viewed through a different mode. Add a habit row to the light screen and copy it into the dark one, and it is already dark.

Designing dark, not inverting

Dark mode is a design of its own. A few rules carry most of the weight:

• Accents get lighter. Teal/700 measures 5.47:1 on white but only 3.24:1 on gray/950. The dark accent has to be a lighter shade.
• Text on accents may flip. White on teal/400 is 1.86:1, a clear fail. That is why color/on-action exists as its own token: in Dark it points at gray/950, giving 9.53:1.
• Elevation goes lighter, not darker. Shadows barely show on dark backgrounds, so raised surfaces such as the New habit sheet use a slightly lighter gray (surface/raised).
• Avoid harsh extremes. Near-white text on near-black reads better for long sessions than pure white on pure black, which can glare.

Modes beyond color

Modes are not just for themes. A Density collection with Comfortable and Compact modes can hold number variables for row padding (12 versus 8) and row gap. A Content collection with string variables can hold the same labels in English and Arabic, which is a quick way to see whether “Save habit” still fits when it becomes longer. You can even switch modes inside a prototype, for example to demo the dark theme toggle in Settings.

You now have a themed, tokenised kit. The last lesson of this section organises it into something another designer, or a developer, can pick up and use without asking you.