> ## Documentation Index
> Fetch the complete documentation index at: https://spiceflow-docs.spicenet.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling and Theming

> Customize the appearance of Spice Flow components to match your brand

## Theme System

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

```tsx theme={null}
<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

```tsx theme={null}
// 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:

```tsx theme={null}
<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:

```tsx theme={null}
// 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

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

### Blue Light

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

### Green Dark with Custom Surfaces

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

### Sharp Trading UI

```tsx theme={null}
<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:

```tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Components" icon="window" href="/sdk/components">
    See all available components
  </Card>

  <Card title="Configuration" icon="sliders" href="/sdk/configuration">
    Configure providers and chains
  </Card>

  <Card title="Examples" icon="book" href="/guides/native-swap">
    See styled examples in action
  </Card>

  <Card title="Best Practices" icon="shield-check" href="/guides/best-practices">
    Follow integration best practices
  </Card>
</CardGroup>