●Configuration

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.

01Web platforms

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

theme.js

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.

02Mobile platforms

Mobile platforms

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

iOS — ThemeConfig.swift

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

Android — ThemeConfig.kt

val theme = ThemeConfig(
    primaryColor = "#6366f1",
    backgroundColor = "#ffffff",
    textColor = "#1f2937",
    borderColor = "#d1d5db",
    cornerRadius = 8.0,
    fontFamily = "Roboto"
)

Flutter — theme.dart

final theme = ThemeConfig(
  primaryColor: '#6366f1',
  backgroundColor: '#ffffff',
  textColor: '#1f2937',
  borderColor: '#d1d5db',
  buttonColor: '#6366f1',
  buttonTextColor: '#ffffff',
  errorColor: '#dc2626',
  borderRadius: 8.0,
  fontFamily: 'Roboto',
);

React Native — IssuedForm.tsx

<IssuedForm
  projectId="..."
  fields={{ /* ... */ }}
  theme={{
    primaryColor: '#6366f1',
    backgroundColor: '#ffffff',
    textColor: '#1f2937',
    borderColor: '#d1d5db',
    borderRadius: 8,
    fontFamily: 'System'
  }}
/>

03CSS overrides (web)

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:

overrides.css

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

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