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.

Paper Duck
Common
Floats. Does not do much else, and is at peace with that.
Window Plant
Uncommon
Grows toward whatever you were about to do next.
Lantern Fox
Rare
Knows a shortcut. Will not say where it comes out.
Storm Bolt
Epic
Strikes the same place twice, on purpose.
Vault Dragon
Legendary
Keeps one of every card ever dealt. This one is its own.
Ash Phoenix
Mythic
Burns down once a century and starts again from the first line.

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

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 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} />

Last updated 2026-10-11. Read this page as Markdown.