Modes and themes
Light, dark and brands, the way each platform switches them.
A Figma collection can have modes, such as light and dark, or one per brand. Basemode keeps every mode, and writes each one the way its platform expects. Semantic tokens that alias primitives stay references wherever the format allows, so switching a mode changes everything built on it.
How each format switches modes
| Format | Default mode | Other modes |
|---|---|---|
| CSS, Tailwind 4, Tailwind 3 | :root / @theme | [data-theme="dark"] blocks. Set data-theme on any element to switch everything inside it. |
| Sass | Variables | A $theme-<mode> map per mode |
| Less | Variables | A .theme-<mode>() mixin per mode to call inside a selector |
| TypeScript, JavaScript, React Native | tokens | A themes object, keyed by mode |
| JSON | tokens | modes, keyed by mode |
| W3C DTCG | tokens.json | tokens.<mode>.json, one file per mode |
| Swift | Values | Colors with a dark mode follow the system appearance |
| Android | values/ | Colors in values-night/ |
| Jetpack Compose | Tokens.Colors | Tokens.DarkColors, for a dark color scheme |
| Flutter | Tokens | TokensDark, for a dark ThemeData |
| shadcn/ui | :root | .dark |
The default mode is the one Figma marks as default for the collection.
Dark mode on native platforms
Swift, Android, Compose and Flutter have their own idea of dark mode, so a mode named dark becomes it. Other modes, such as brands, have no native place, so those platforms get the default mode only. Use the web or JSON formats when an app switches brands at runtime.
Naming modes
Modes are written as Figma names them, lowercased, so a mode called "High contrast" becomes high-contrast. Figma's default name, "Mode 1", is dropped, since it doesn't say anything.
On the shared docs page
The shared docs page has a mode switch, so anyone can see every color and the contrast checks in dark mode before it ships.