How do I

Set up a dark mode

Give one theme light and dark values, so every token that needs it has both.

1. Put the light and dark values in their own sets

Make two token sets with the same token names: one with light values (say light) and one with dark values (dark). Tokens that don’t change between modes, like spacing, stay in your other sets.

Tip: Keep your semantic tokens (such as text.primary or surface.background) pointing at these, and your components at the semantic tokens. Then one switch changes everything.

2. Add the modes

  1. Open Tokenwright on the theme, and press Modes.
  2. Add an axis, such as scheme, with two modes: light (make it the default) and dark.
  3. For light: enable the light set, disable the dark one. For dark: the other way round.

3. Check it and release it

  • On Tokens, pick each mode to see every value in it, and look at Needs a look for contrast problems in dark.
  • Propose a release. Stoaken compares every mode, and your components are checked in both.
  • Use these tokens can give you CSS with light and dark together.

Looking for the API, CLI or AI agents? They’re in the developer docs.