theme

The theme prop on TaxKitProvider controls how the iframe renders visually. It takes three optional fields:

interface TaxKitTheme {
  light?: ThemeContract;
  dark?: ThemeContract;
  mode?: 'light' | 'dark';
}

The ThemeContract field names (background, foreground, primary, muted / mutedForeground, accent, destructive, border, input, popover / popoverForeground, radius) match the canonical shadcn / Radix token contract. The iframe's UI is built on CoinTracker's @cointracker/base-ui, which is itself a shadcn-patterned library on top of Radix primitives — if you've worked with shadcn before, the semantics are identical. The ct*-prefixed fields are CoinTracker-specific surfaces with no shadcn equivalent; leave them unset for defaults.

Token values are any valid CSS color string (#0052FF, rgb(0, 82, 255), hsl(216 100% 50%), rgba(0, 82, 255, 0.8)). The iframe doesn't validate — an invalid string renders as the browser default.

Fields

theme.lightThemeContract

Color and spacing tokens applied when the iframe renders in light mode. See ThemeContract below for the full token list.

theme.darkThemeContract

Color and spacing tokens applied when the iframe renders in dark mode.

theme.mode'light' | 'dark'

Force light or dark mode. When omitted, the iframe defaults to the user's OS preference (via prefers-color-scheme).

Example

<TaxKitProvider
  fetchAccessToken={fetchAccessToken}
  theme={{
    mode: 'dark',
    light: {
      radius: '0.5rem',
      spacing: '0.25rem',
      fontSans: '"Inter", sans-serif',
      background: 'rgb(255, 255, 255)',
      foreground: 'rgb(10, 11, 13)',
      primary: 'rgb(0, 82, 255)',
      // …see ThemeContract for all available tokens
    },
    dark: {
      radius: '0.5rem',
      spacing: '0.25rem',
      fontSans: '"Inter", sans-serif',
      background: 'rgb(10, 11, 13)',
      foreground: 'rgb(245, 248, 255)',
      primary: 'rgb(55, 115, 245)',
    },
  }}
>
  <YourApp />
</TaxKitProvider>

If your parent re-renders frequently, memoize the theme object (or its light/dark sub-objects) with useMemo — the provider already wraps the contract in useMemo internally, so stable references from your side avoid re-firing the dispatcher's CONFIG effect.

ThemeContract fields

Every field is optional. Unset tokens fall back to the iframe's defaults.

backgroundstring

Page background color.

foregroundstring

Default text color on background.

primarystring

Brand color used for primary buttons, focus rings, and emphasis.

secondarystring

Secondary surface color (e.g. card backgrounds).

mutedstring

Muted surface color for low-emphasis backgrounds.

mutedForegroundstring

Muted text color for low-emphasis copy.

accentstring

Accent surface color (used for hover/active states on neutral controls).

destructivestring

Color for destructive actions and error states.

warningstring

Color for warning states.

successstring

Color for success states.

borderstring

Default border color.

inputstring

Border color for form inputs.

popoverstring

Popover/modal background. Defaults to background when not provided.

popoverForegroundstring

Popover/modal text color. Defaults to foreground when not provided.

radiusstring

Default border-radius for components.

buttonRadiusstring

Button border-radius. Defaults to the Coinbase pill shape (9999px) when not provided.

cardRadiusstring

Card/container border-radius. Defaults to 1rem (16px) when not provided.

spacingstring

Base spacing unit.

fontSansstring

Sans-serif font stack.

ctCardSurfacestring

CoinTracker-specific surface token used inside the kit.

ctForegroundstring

CoinTracker-specific foreground token.

ctEmphasisstring

CoinTracker-specific emphasis token.

ctSecondarystring

CoinTracker-specific secondary token.