Skip to main content
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. The deposit UI follows the user’s system preference by default. For hosted WebViews, force a mode with the theme query parameter: 
https://daimo.com/webview?session={sessionId}&cs={clientSecret}&theme=dark

​
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 keyCSS variableControls
bg--daimo-bgPage backdrop
surface--daimo-surfaceMain modal surface
surfaceSecondary--daimo-surface-secondaryRows, inputs, and subtle panels
surfaceHover--daimo-surface-hoverHover states
skeleton--daimo-skeletonLoading placeholders
title--daimo-titleHeadings
text--daimo-textPrimary text
textSecondary--daimo-text-secondaryDescriptions and row subtitles
textMuted--daimo-text-mutedMuted helper text
success--daimo-successCompleted and selected states
error--daimo-errorFailed states
warning--daimo-warningWarning and pending states
accent--daimo-accentFocus rings and progress
placeholder--daimo-placeholderPlaceholder and inactive text
border--daimo-borderDividers and outlines
qrBg--daimo-qr-bgQR code background
qrDot--daimo-qr-dotQR code dots
radiusSm--daimo-radius-smSmall controls
radiusMd--daimo-radius-mdInputs and compact rows
radiusLg--daimo-radius-lgRows and primary actions
radiusXl--daimo-radius-xlModal container
State backgrounds and checkmark colors are derived from the state tokens.

​
Per-session override

Most integrations should use the dashboard theme. Use a per-session CSS override only when a single deposit flow needs a different look. Pass display.themeCssUrl when creating the session: 
{
  "display": {
    "title": "Deposit to Acme",
    "verb": "Deposit",
    "themeCssUrl": "https://example.com/daimo-theme.css"
  }
}
The CSS file should define Daimo custom properties: 
:root {
  --daimo-surface: #ffffff;
  --daimo-surface-secondary: #f6f7f9;
  --daimo-title: #111827;
  --daimo-text: #111827;
  --daimo-accent: #2563eb;
  --daimo-radius-xl: 20px;
}
A per-session display.themeCssUrl takes precedence over the dashboard theme. Host the file on a public URL with CORS enabled.