Themes
A theme is a complete set of values for the same tokens. It is chosen when the application is built, and the modes inside it switch at runtime.
On this page
How it works
The theme is set in the granum config — theme: ', the first of the catalog by default. One theme ships in the application's CSS, and the mode is set on the root as the pair data-theme=". Components and tokens are the same for every theme: only the values change.
Themes in the catalog
- BlueprintFlat precision: fill, line and type. modes: light, dark.
- ClayWarm paper, graphite ink and a single clay dot per screen. modes: light, dark.
- SlateCool neutrals of the slate scale, an indigo accent and contrast tuned to AA in both modes. modes: light, dark.
- TactileA button as an object: light from above, a shadow in the tone's color below, a response with its body. modes: light, dark.