Dark mode
The Tokens collection has two modes, Light and Dark. Components do not change: when a frame is set to Dark mode, each token points to its dark value. Text ≥4.5:1 and control borders, indicators and focus ≥3:1 in both modes.
How it works
Turn on the mode in the layers panel: select a frame › Appearance › Tokens › Dark. Everything inside changes. Primitives (Primitives collection) have no modes; semantic tokens point to a different primitive in each mode. New token color-text-on-action: text and icons on action or solid status backgrounds (white in Light, ink in Dark).
Tokens · Light and Dark
Value of each semantic color token in both modes.
Contrast in Dark
Pairs measured in Dark mode. Text: minimum 4.5:1. Control borders, indicators and focus: minimum 3:1.
Preview in Dark
The same components with the frame in Dark mode. In dark, use Navbar Theme=Dark: the logo does not change with the mode.