# Theming

Every component takes a `theme`: a plain object with a ground, a card surface, two text colours, a five-step ramp and a colour for each rarity. Ten ship, each in dark and light, and one function makes a full theme from a single colour.

> Live preview: see it play at https://bettertyped.github.io/react-cards-opening/docs/theming/
>
> Pick a tile. Every preview on this site follows.

## Use a built-in theme

```tsx
import { CardHunt, themeOf } from "@react-cards-opening/ui";

<CardHunt theme={themeOf("grape", "dark")} {...rest} />
```

The ids are `moss`, `ice`, `grape`, `halloween`, `ocean`, `candy`, `sunset`, `synthwave`, `mono` and `paper`. `THEME_LIST` has all ten with their names, for a picker. With no `theme` a component wears `moss` in the dark.

## From one colour

```tsx
import { customTheme } from "@react-cards-opening/ui";

const theme = customTheme("#ff5a36", "dark");
```

`customTheme` mixes a five-step ramp into a dark or light ground. Rarity keeps its six colours: grey, green, blue, purple, orange and red, deepened on a light ground so they hold. To change them, spread the theme and hand it a `rarity` of your own.

## The shape of a theme

```ts
interface CardTheme {
  bg: string; // the panel and the back of a card
  card: string; // the face of a card, badges
  fg: string; // text
  muted: string; // quieter text
  levels: readonly [string, string, string, string, string]; // the grid's ramp
  rarity: Record<string, string>; // a colour per tier id
}
```

`levels[0]` is an unlit cell and `levels[4]` is the accent: the scan button, the beam's glow, the back of a card. A tier with no colour in `rarity` wears `muted`. Use plain hex colours: they are handed to GSAP as they are.

## CSS variables

Colours come from the `theme` prop. A few things that are not colours are yours to set in CSS, on any ancestor of the components. [Styling by hand](https://bettertyped.github.io/react-cards-opening/docs/guides/styling/) lists all of them, and how to put a class of your own on any part.

| Variable | Default | What it does |
| --- | --- | --- |
| `--rco-font` | the page's font | The typeface of everything the library draws. |
| `--rco-radius` | `28px` | The corner of a card. The foil border follows it. |
| `--rco-card-shadow` | a deep black drop | The shadow under a card. |
| `--rco-z` | `80` | Where the reveal's overlay stacks. |

```css
:root {
  --rco-font: "Inter Variable", system-ui, sans-serif;
  --rco-radius: 18px;
  --rco-z: 1000;
}
```

## Follow the page's dark mode

```tsx
const mode = document.documentElement.classList.contains("dark") ? "dark" : "light";

<CardHunt theme={themeOf("ocean", mode)} {...rest} />
```

## Related

- [Rarity tiers](https://bettertyped.github.io/react-cards-opening/docs/rarity-tiers/)
- [Custom tiers](https://bettertyped.github.io/react-cards-opening/docs/guides/custom-tiers/)
- [Card](https://bettertyped.github.io/react-cards-opening/docs/components/card/)
- [PixelGlyph](https://bettertyped.github.io/react-cards-opening/docs/components/pixel-glyph/)

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