Theming

Customize colors globally through ToffeeProvider or per-component via CSS variables.

How it works

Each tone (neutral, brand, muted) maps to a set of CSS custom properties. Components read these variables from their root element. You can override any variable globally via ToffeeProvider or locally via inline styles.

CSS Variables

Global Override via ToffeeProvider

Pass a theme prop to override CSS variables for any tone:

<ToffeeProvider
  theme={{
    tones: {
      brand: {
        '--toffee-shimmer-mid': 'rgba(234, 179, 8, 0.7)',
        '--toffee-text-color': 'rgba(234, 179, 8, 0.8)',
        '--toffee-orb-color': 'rgba(234, 179, 8, 0.5)',
      },
    },
  }}
>
  {children}
</ToffeeProvider>

Per-Component Override

Override variables on a single component via the style prop:

<ShimmerText
  tone="brand"
  style={{
    '--toffee-shimmer-mid': 'rgba(16, 185, 129, 0.7)',
    '--toffee-text-color': 'rgba(16, 185, 129, 0.8)',
  } as React.CSSProperties}
>
  Custom green shimmer
</ShimmerText>

Default Tone Values