Customization

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.

{
  "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.

Getting Started

Accept Deposits

Withdrawals

Advanced

Resources

Customization

Set an org theme

Light and dark mode

Theme JSON

Tokens

​Set an org theme

​Light and dark mode

​Theme JSON

​Tokens

Set an org theme

Light and dark mode

Theme JSON

Tokens