Theming & Tokens

SpartanFX components are themeable at three levels, from coarsest to finest. Most components accept all three; check each component's props in the API Reference.

1. Appearance (light / dark)

Components accept an appearance prop driven by the shared AppearanceMode enum and reflect it via a data-theme attribute, so dark mode is a single prop:

import { Accordion, AppearanceMode } from '@spartanfx/react';

<Accordion title="Dark panel" appearance={AppearanceMode.dark}>…</Accordion>

2. Design tokens

Each themeable component exposes a tokens object (e.g. IAccordionTokens, IPagerTokens, IRatingTokens). Tokens map to CSS custom properties, so you set brand colors, radii, shadows, and typography without writing CSS:

<Accordion
  title="Branded"
  tokens={{
    colorPrimary: '#0b5cab',
    borderRadius: '12px',
    shadow: '0 2px 8px rgba(0,0,0,.12)',
  }}
>
  …
</Accordion>

Tokens are the preferred way to restyle — they're typed, documented per component, and survive upgrades.

3. Class-name overrides

For structural CSS you own, components accept a classes object (e.g. IAccordionClassNames) plus a root className. Each key targets one internal element:

<Accordion title="Custom" classes={{ root: 'my-card', toggle: 'my-card__toggle' }} />

Choosing a level

Goal	Use
Match light/dark to the host	appearance
Apply brand colors, spacing, radius	tokens
Hook into your own design system / CSS	classes + className

Related

• Architecture
• Icons