Styling and Theming

Theme System

Set your brand once on SpiceFlowProvider. Every SDK component inherits it automatically.

<SpiceFlowProvider
  provider="privy"
  network="mainnet"
  nativeChainId={8453}
  theme={{
    primaryColor: "#f97316",
    dark: true,
    appName: "MyApp",
  }}
>
  {children}
</SpiceFlowProvider>

SpiceTheme Options

Option	Type	Default	Description
`primaryColor`	`string`	`"#EA4B4B"`	Accent color — buttons, highlights, active states
`dark`	`boolean`	`false`	Dark or light mode
`shell`	`string`	Mode default	Modal outer background
`card`	`string`	Mode default	Card and input area background
`text`	`string`	Mode default	Primary text color
`textMuted`	`string`	Mode default	Secondary/label text color
`border`	`string`	Mode default	Border color
`borderRadius`	`string`	`"8px"`	Border radius applied across all components
`fontFamily`	`string`	`"Helvetica Neue"`	Primary font family
`appName`	`string`	`"Spicenet"`	App name shown in modal headers
`logo`	`ReactNode`		Custom logo for modal headers

Surface tokens (shell, card, text, textMuted, border) have sensible defaults per mode — only set what you want to override.

Dark Mode

// Dark
<SpiceFlowProvider theme={{ primaryColor: "#f97316", dark: true }}>

// Light
<SpiceFlowProvider theme={{ primaryColor: "#f97316", dark: false }}>

Default Surface Colors

Token	Dark	Light
`shell`	`#141414`	`#ffffff`
`card`	`#1e1e1e`	`#f9fafb`
`text`	`#ffffff`	`#111827`
`textMuted`	`#888888`	`#6b7280`
`border`	`{primaryColor}33`	`{primaryColor}22`

Custom Surfaces

Override any surface token alongside the mode:

<SpiceFlowProvider
  theme={{
    primaryColor: "#10b981",
    dark: true,
    shell: "#0f1f15",
    card: "#0a1a10",
    border: "#1a3a20",
    borderRadius: "12px",
  }}
>

Per-Component Override

Pass styles to any component to override the provider theme for that instance only:

// Different accent on a single modal
<SpiceDeposit
  isOpen={isOpen}
  onClose={onClose}
  styles={{ primaryColor: "#10b981" }}
/>

// Force dark on one component even if provider is light
<SpiceWithdraw
  isOpen={isOpen}
  onClose={onClose}
  dark={true}
  styles={{ primaryColor: "#3b82f6" }}
/>

// Full button + input customisation
<SpiceDeposit
  isOpen={isOpen}
  onClose={onClose}
  styles={{
    primaryColor: "#10b981",
    button: { backgroundColor: "#10b981", color: "#ffffff", borderRadius: "8px" },
    inputVariant: "dark",
    fontFamily: '"Inter", sans-serif',
  }}
/>

Available `styles` keys per component

Component	Keys
`SpiceDeposit`	`primaryColor`, `button.backgroundColor`, `button.color`, `button.borderRadius`, `inputVariant`, `fontFamily`
`SpiceWithdraw`	`primaryColor`, `button.backgroundColor`, `button.color`, `fontFamily`
`SpiceSupply`	`primaryColor`, `button.backgroundColor`, `button.color`, `inputVariant`
`SpiceLockModal`	`primaryColor`, `button.backgroundColor`, `button.color`, `fontFamily`
`LpModal`	`primaryColor`, `fontFamily`
`AccountDisplay`	`primaryColor`, `fontFamily`
`SpiceBalance`	`primaryColor`, `fontFamily`

inputVariant accepts "light" or "dark" to override the input field style independently of the global mode.

Fonts

The SDK uses two fonts:

Helvetica Neue — all body text, labels, headings, descriptions
IBM Plex Mono — amounts, addresses, hashes, button labels

Override the body font via theme.fontFamily. The monospace font is always used for technical displays.

Examples

Orange Dark

<SpiceFlowProvider theme={{ primaryColor: "#f97316", dark: true }}>

Blue Light

<SpiceFlowProvider theme={{ primaryColor: "#3b82f6", dark: false }}>

Green Dark with Custom Surfaces

<SpiceFlowProvider
  theme={{
    primaryColor: "#10b981",
    dark: true,
    shell: "#0f1f15",
    card: "#0a1a10",
    borderRadius: "12px",
  }}
>

Sharp Trading UI

<SpiceFlowProvider
  theme={{
    primaryColor: "#5BFFB0",
    dark: true,
    shell: "#0a0a0a",
    card: "#111111",
    borderRadius: "0px",
  }}
>

Building Custom Components

Use useSpiceBrand to match the SDK theme inside your own components:

import { useSpiceBrand } from "@spicenet-io/spiceflow-ui";

function CustomCard() {
  const { primaryColor, dark, palette } = useSpiceBrand();

  return (
    <div style={{
      backgroundColor: palette.cardBg,
      color: palette.textPrimary,
      border: `1px solid ${palette.cardBorder}`,
      borderRadius: "8px",
      padding: "16px",
    }}>
      <h3 style={{ color: primaryColor }}>Custom card</h3>
      <p style={{ color: palette.textSecondary }}>Matches SDK palette</p>
    </div>
  );
}

palette is the fully-resolved palette for the current mode — dark or light values depending on dark. It exposes: shell, cardBg, inputBg, hoverBg, textPrimary, textSecondary, inputText, inputPlaceholder, cardBorder, inputBorder, buttonBorder, and semantic tokens (successBg, errorBg, warningBg, infoBg, and their border/text variants). dk is the raw dark palette, useful when you need dark-specific values regardless of mode (e.g. for overlay rendering).

Next Steps

Components

See all available components

Configuration

Configure providers and chains

Examples

See styled examples in action

Best Practices

Follow integration best practices

Getting Started

SDK Reference

Guides & Examples

Technical Deep Dive

Theme System

SpiceTheme Options

Dark Mode

Default Surface Colors

Custom Surfaces

Per-Component Override

Available `styles` keys per component

Fonts

Examples

Orange Dark

Blue Light

Green Dark with Custom Surfaces

Sharp Trading UI

Building Custom Components

Next Steps

Components

Configuration

Examples

Best Practices

​Theme System

​SpiceTheme Options

​Dark Mode

​Default Surface Colors

​Custom Surfaces

​Per-Component Override

​Available styles keys per component

​Fonts

​Examples

​Orange Dark

​Blue Light

​Green Dark with Custom Surfaces

​Sharp Trading UI

​Building Custom Components

​Next Steps

Components

Configuration

Examples

Best Practices

Theme System

SpiceTheme Options

Dark Mode

Default Surface Colors

Custom Surfaces

Per-Component Override

Available `styles` keys per component

Fonts

Examples

Orange Dark

Blue Light

Green Dark with Custom Surfaces

Sharp Trading UI

Building Custom Components

Next Steps