# 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.

> Live preview: see the chart playing at https://bettertyped.github.io/react-wrapped/docs/theming/
>
> The swatches under any preview change every preview on the site.

## Pick a palette

```tsx
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.

```tsx
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. |

```css
.my-badge {
  background: var(--wr-card);
  color: var(--wr-fg);
  box-shadow: inset 0 0 0 1px var(--wr-l2);
}
```

## Related

- [Custom palette and chrome colours](https://bettertyped.github.io/react-wrapped/docs/guides/palette-and-chrome/)
- [Formats](https://bettertyped.github.io/react-wrapped/docs/formats/)
- [WrappedConfigurator](https://bettertyped.github.io/react-wrapped/docs/player/configurator/)
- [Designs](https://bettertyped.github.io/react-wrapped/designs/)

Source: https://bettertyped.github.io/react-wrapped/docs/theming/