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

# Customization

> Match the Daimo deposit UI to your brand

Customize the Daimo modal and hosted WebView from the Daimo dashboard. The theme applies automatically when the deposit UI loads a session for your org.

Use customization for brand colors, light and dark mode, QR code colors, state colors, and corner radius. No code changes are required for the org default theme.

## Set an org theme

Open **Dashboard > Customization**.

The page has two editors:

* **Theme**: edit tokens with color pickers and a live preview
* **JSON**: import or edit the full theme object directly

Changes autosave. Reset returns the org to Daimo's default modal theme.

## Light and dark mode

A theme contains `light` and `dark` token sets. Choose Automatic, Light, or Dark in the dashboard customization page. Hosted WebViews and SDK modals load the org setting from the session.

## Theme JSON

Use the JSON editor when you want to copy a theme between environments or keep it in your own config.

```json theme={null}
{
  "light": {
    "bg": "#00000008",
    "surface": "#FFFFFF",
    "surfaceSecondary": "#F6F7F9",
    "surfaceHover": "#F0F2F5",
    "skeleton": "#F6F7F9",
    "title": "#111827",
    "text": "#111827",
    "textSecondary": "#6B7280",
    "textMuted": "#9CA3AF",
    "success": "#16A34A",
    "error": "#DC2626",
    "warning": "#F97316",
    "accent": "#2563EB",
    "placeholder": "#D1D5DB",
    "border": "#E5E7EB",
    "qrBg": "#FFFFFF",
    "qrDot": "#111827",
    "radiusSm": "0.5rem",
    "radiusMd": "0.75rem",
    "radiusLg": "1rem",
    "radiusXl": "20px"
  },
  "dark": {
    "bg": "#00000008",
    "surface": "#111827",
    "surfaceSecondary": "#1F2937",
    "surfaceHover": "#374151",
    "skeleton": "#1F2937",
    "title": "#FFFFFF",
    "text": "#FFFFFF",
    "textSecondary": "#9CA3AF",
    "textMuted": "#6B7280",
    "success": "#4ADE80",
    "error": "#F87171",
    "warning": "#FB923C",
    "accent": "#60A5FA",
    "placeholder": "#6B7280",
    "border": "#374151",
    "qrBg": "#111827",
    "qrDot": "#FFFFFF",
    "radiusSm": "0.5rem",
    "radiusMd": "0.75rem",
    "radiusLg": "1rem",
    "radiusXl": "20px"
  }
}
```

Colors must be hex, `rgb()`, or `rgba()`. Radius values must use `px` or `rem`.

## Tokens

| JSON key           | CSS variable                | Controls                        |
| ------------------ | --------------------------- | ------------------------------- |
| `bg`               | `--daimo-bg`                | Page backdrop                   |
| `surface`          | `--daimo-surface`           | Main modal surface              |
| `surfaceSecondary` | `--daimo-surface-secondary` | Rows, inputs, and subtle panels |
| `surfaceHover`     | `--daimo-surface-hover`     | Hover states                    |
| `skeleton`         | `--daimo-skeleton`          | Loading placeholders            |
| `title`            | `--daimo-title`             | Headings                        |
| `text`             | `--daimo-text`              | Primary text                    |
| `textSecondary`    | `--daimo-text-secondary`    | Descriptions and row subtitles  |
| `textMuted`        | `--daimo-text-muted`        | Muted helper text               |
| `success`          | `--daimo-success`           | Completed and selected states   |
| `error`            | `--daimo-error`             | Failed states                   |
| `warning`          | `--daimo-warning`           | Warning and pending states      |
| `accent`           | `--daimo-accent`            | Focus rings and progress        |
| `placeholder`      | `--daimo-placeholder`       | Placeholder and inactive text   |
| `border`           | `--daimo-border`            | Dividers and outlines           |
| `qrBg`             | `--daimo-qr-bg`             | QR code background              |
| `qrDot`            | `--daimo-qr-dot`            | QR code dots                    |
| `radiusSm`         | `--daimo-radius-sm`         | Small controls                  |
| `radiusMd`         | `--daimo-radius-md`         | Inputs and compact rows         |
| `radiusLg`         | `--daimo-radius-lg`         | Rows and primary actions        |
| `radiusXl`         | `--daimo-radius-xl`         | Modal container                 |

State backgrounds and checkmark colors are derived from the state tokens.