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.
\nOpen 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:
\n| Semantic variable | \nLight | \nDark | \n
|---|---|---|
color/surface/default | \nwhite | \ngray/950 (#111827) | \n
color/surface/raised | \nwhite | \ngray/800 (#1F2937) | \n
color/text/primary | \ngray/900, 17.40:1 | \ngray/50, 16.98:1 | \n
color/text/secondary | \ngray/500, 4.83:1 | \ngray/400, 6.99:1 | \n
color/action/primary | \nteal/700, 5.47:1 | \nteal/400, 9.53:1 | \n
color/on-action | \nwhite | \ngray/950 | \n
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.
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.
\nNow 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.
\n\nDark mode is a design of its own. A few rules carry most of the weight:
\ncolor/on-action exists as its own token: in Dark it points at gray/950, giving 9.53:1.surface/raised).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.
\n","toc":[{"id":"sec-1","text":"Modes are columns of values","level":2},{"id":"sec-2","text":"Switching a screen","level":2},{"id":"sec-3","text":"Designing dark, not inverting","level":2},{"id":"sec-4","text":"Modes beyond color","level":2}],"takeaways":["A mode is one column of values in a variable collection; switching a frame’s mode swaps every bound value at once.","Put modes on the semantic collection and keep primitives single-mode, so dark mode only changes what each meaning points at.","Layers use the Auto mode by default and inherit from their nearest parent with a mode set, falling back to the collection’s default.","Dark mode is not inversion; accents usually get lighter, text on accents may flip to dark, and surfaces get lighter as they rise.","Every text and control color needs a fresh contrast check in each mode, because a pair that passes in light can fail in dark."],"further":[{"title":"Modes for variables","url":"https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables"},{"title":"Variable modes in prototypes","url":"https://help.figma.com/hc/en-us/articles/15253268379799-Variable-modes-in-prototypes"},{"title":"Dark Mode (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"}],"quiz":[{"q":"You set the Today frame to Dark. One habit row inside it has its mode explicitly set to Light. What do you see?
","options":[{"text":"The whole screen is dark, and that one row renders with Light values.","why":"Correct. Layers inherit from the nearest parent with a mode set. An explicit mode on the row overrides the frame’s for that row and its children."},{"text":"The whole screen including the row is dark, because the frame’s mode always wins.","why":"The nearest explicit mode wins, not the outermost one."},{"text":"Figma shows an error because modes conflict.","why":"Mixing modes is allowed and useful, for example a light card inside a dark promo area."},{"text":"The row turns light and so does the rest of the screen.","why":"A child’s mode never changes its parent’s."}],"answer":0},{"q":"In dark mode, color/action/primary points at teal/400 (#2DD4BF) and the button label uses color/on-action, still white. The label measures 1.86:1. What is the right fix?
Why do the primitives (teal/700, gray/500…) stay in a collection with a single mode?
","options":[{"text":"Figma does not allow modes on collections with more than 20 variables.","why":"There is no such limit. The choice is architectural."},{"text":"Primitives are raw facts about the palette. Meanings change per mode by aliasing different primitives.","why":"Correct. If teal/700 changed per mode, it would no longer be teal/700, and every alias would become unpredictable."},{"text":"Primitives cannot be aliased if they have modes.","why":"Variables with modes can still be aliased. The reason is clarity, not a technical rule."},{"text":"Dev Mode only reads single-mode collections.","why":"Dev Mode shows variables from any collection, including their modes."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["lighter-accent","flip-on-action","border-dark","secondary-white","duplicate-recolor","mode-primitives"],"correct":["lighter-accent","flip-on-action","border-dark"],"title":"Review the first dark-mode pass","prompt":"A teammate added a Dark mode to Steady’s Semantic collection but only changed the surface and text values. Here is what the Today screen resolves to in Dark, measured against surface/default (#111827) unless noted:
| Variable | \nDark value | \nResult | \n
|---|---|---|
text/primary | \ngray/50 | \n16.98:1 | \n
text/secondary | \ngray/400 | \n6.99:1 | \n
action/primary | \nteal/700 (unchanged) | \n3.24:1, check icons and links look dull | \n
on-action | \nwhite (unchanged) | \n5.47:1 on teal/700 | \n
border/default | \ngray/200 (unchanged) | \n14.33:1, dividers glare | \n
Select every change that improves the dark mode without breaking anything else.
\n","hints":["Links and small check icons are text-like. Is 3.24:1 enough for them?","If you lighten the accent, check what happens to the white label sitting on it.","Dividers are decoration; they should be visible but quiet. A near-white line on near-black is neither."],"explanation":"Point action/primary at a lighter teal such as teal/400 (9.53:1 on gray/950), because links and small icons need text-level contrast. That makes white labels on the accent fail (1.86:1), so flip on-action to a dark gray such as gray/950 (9.53:1) in Dark. Point border/default at a darker gray so dividers separate rows without glaring; keep a separate control-outline token that still meets 3:1 for checkboxes. Making secondary text white erases the text hierarchy, recoloring a duplicate frame by hand defeats the whole point of modes, and primitives should stay single-mode facts that the semantic layer chooses between.