Theming

Every component reads from --ritarena-* CSS variables. Override them once, every component rehomes. No forking, no className wars.

Default values

:root {
  --ritarena-accent: #888888;
  --ritarena-accent-glow: transparent;
  --ritarena-danger: #ff5555;
  --ritarena-bg: #0d0d14;
  --ritarena-bg-card: #12121c;
  --ritarena-text: #e0e0e0;
  --ritarena-text-muted: #666666;
  --ritarena-border: #1a1a2a;
  --ritarena-radius: 6px;
  --ritarena-font: system-ui, -apple-system, sans-serif;
  --ritarena-font-mono: ui-monospace, monospace;
}

Neutral dark defaults. They look fine out of the box and don't scream "RitArena" at your users.

Option 1: Override via CSS (recommended)

/* your app's global CSS */
:root {
  --ritarena-accent: #FFC53D;  /* casino gold */
  --ritarena-bg: #1a0a0a;
  --ritarena-danger: #ff3030;
}

Applies to every RitArena component in your app. Pick this if you want consistent branding without thinking about it again.

Option 2: Theme prop (per-component)

import { Leaderboard } from '@ritarena/ui'

<Leaderboard
  players={data}
  theme={{
    accent: '#FFC53D',
    bg: '#1a0a0a',
    danger: '#ff3030',
  }}
/>

Injects CSS variables as inline style. Good for arena-specific looks — different games, different vibes, same components.

Option 3: Scoped CSS

<div style={{ '--ritarena-accent': '#FFC53D' } as React.CSSProperties}>
  <Leaderboard players={data} />
  <EventFeed events={events} />
</div>

Scope overrides to a subtree. Everything inside inherits. Handy when one section of the page needs its own palette.

Available tokens

Variable	Purpose	Default
`--ritarena-accent`	Primary highlight (scores, winners, progress)	`#888888`
`--ritarena-accent-glow`	Optional glow behind accent	`transparent`
`--ritarena-danger`	Eliminations, urgent, errors	`#ff5555`
`--ritarena-bg`	Page/backdrop background	`#0d0d14`
`--ritarena-bg-card`	Component card background	`#12121c`
`--ritarena-text`	Primary text	`#e0e0e0`
`--ritarena-text-muted`	Labels, meta, tertiary	`#666666`
`--ritarena-border`	Borders, dividers	`#1a1a2a`
`--ritarena-radius`	Border radius	`6px`
`--ritarena-font`	Primary font stack	system-ui
`--ritarena-font-mono`	Monospace (stats, codes)	ui-monospace

Theme examples

Steal these. No attribution required.

Cyberpunk (neon green on black)

:root {
  --ritarena-accent: #00ff88;
  --ritarena-accent-glow: #00ff8840;
  --ritarena-bg: #000000;
  --ritarena-bg-card: #0a0a0a;
  --ritarena-border: #003320;
}

Casino (gold on deep red)

:root {
  --ritarena-accent: #FFC53D;
  --ritarena-danger: #ff3030;
  --ritarena-bg: #1a0505;
  --ritarena-bg-card: #2a0a0a;
  --ritarena-border: #3a1515;
  --ritarena-font: 'Georgia', serif;
}

Minimal light

:root {
  --ritarena-accent: #0088ff;
  --ritarena-bg: #ffffff;
  --ritarena-bg-card: #f5f5f5;
  --ritarena-text: #111111;
  --ritarena-text-muted: #666666;
  --ritarena-border: #e0e0e0;
}

On this page