Theming
A theme is one colour and one switch. The palette names the colour, mode says dark or light, and every scene, chart, transition and card reads the result from CSS variables on the stage. Pick a built-in palette, or hand over one accent and the rest is worked out from it.
Rings
Epic- TypeScript55%
- Go25%
- CSS13%
- Shell7%
Parts of a whole, biggest outside.
The swatches under any preview change every preview on the site.
Pick a palette
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/kit";
const config: WrappedConfig = { ...DEFAULT_WRAPPED_CONFIG, palette: "grape", mode: "light" };The built-in palettes are listed in WRAPPED_PALETTES. Each has a dark and a light side with the same hue, so mode is one switch for all of them.
Your own colour
Set the palette to custom and give it an accent. The five levels, the surfaces and the four rarity colours are derived from that one colour, so the result always fits itself.
import { DEFAULT_WRAPPED_CONFIG, type WrappedConfig } from "@react-wrapped/kit";
const config: WrappedConfig = { ...DEFAULT_WRAPPED_CONFIG, palette: "custom", accent: "#ff5c8a" };The variables
resolvePalette(config) returns the palette as an object, and the stage writes it out as CSS variables. Anything you draw inside a scene can use them.
| Variable | What it is |
|---|---|
--wr-bg | The frame's background. |
--wr-card | A panel standing on the background. |
--wr-fg | Text. |
--wr-muted | Quieter text and hairlines. |
--wr-l0 to --wr-l4 | The five levels of the palette, empty to brightest. Level 4 is the accent. |
--wr-common, --wr-rare, --wr-epic, --wr-legendary | The four rarity colours, chosen to sit well on this palette. |
--wr-rarity | The rarity colour of the scene being drawn. Charts light their point with it. |
.my-badge {
background: var(--wr-card);
color: var(--wr-fg);
box-shadow: inset 0 0 0 1px var(--wr-l2);
}