Styling & themes

Match the form to your brand. Every SDK exposes the same high-level properties — the object shape just maps to each platform's idioms.

Web platforms

Pass a theme object to Issued.init(...) (or the theme prop on the React / Vue components):

Property	Type	Description
`mode`	`'auto' \| 'light' \| 'dark'`	Color scheme. "auto" follows prefers-color-scheme.
`primaryColor`	`string`	Button and accent color.
`errorColor`	`string`	Validation error color.
`successColor`	`string`	Success message color.
`borderRadius`	`string`	Form element corner radius (e.g. "8px").
`fontFamily`	`string`	Font family for form text.
`cssPrefix`	`string`	Custom CSS class prefix (default "issued").

Issued.init({
  projectId: "your-project-id",
  fields: { /* ... */ },
  theme: {
    mode: "auto",
    primaryColor: "#6366f1",
    errorColor: "#dc2626",
    successColor: "#059669",
    borderRadius: "8px",
    fontFamily: "Inter, sans-serif"
  }
});

Back-compat note: older examples use customization.theme: 'light' as a shortcut for mode. That still works but is deprecated — prefer theme.mode going forward.

Mobile platforms

Native SDKs expose a ThemeConfig struct with granular color control. Colors are hex strings.

swift

let theme = ThemeConfig(
    primaryColor: "#6366f1",
    backgroundColor: "#ffffff",
    textColor: "#1f2937",
    borderColor: "#d1d5db",
    cornerRadius: 8.0,
    fontFamily: "SF Pro Display"
)

CSS overrides (web)

If the theme object doesn't cover what you need, every rendered element has a class prefixed with cssPrefix (default issued). Target them directly:

css

.issued-form { max-width: 480px; }
.issued-field-label { font-weight: 600; }
.issued-submit-button { text-transform: uppercase; }

More configuration

For field setup, see fields reference. For runtime hooks, see callbacks.