Theming

Customize the appearance of embedded forms.

FormWork forms can be customized to match your brand. Use the visual theme editor or CSS custom properties for full control.

Theme Editor

Accessing the Editor

1. Open your form in the builder
2. Click the Appearance tab
3. Use the visual controls to customize

Preview Changes

The live preview shows changes in real-time:

• Toggle between light and dark mode
• Preview on different screen sizes
• See actual form rendering

Theme Settings

Color Scheme

Typography

Layout

Borders

CSS Custom Properties

Override any theme value with CSS:

formwork-form {
  /* Colors */
  --fw-primary: #3b82f6;
  --fw-primary-foreground: #ffffff;
  --fw-background: #ffffff;
  --fw-foreground: #0f172a;
  --fw-muted: #f1f5f9;
  --fw-muted-foreground: #64748b;
  --fw-border: #e2e8f0;

  /* Typography */
  --fw-font-family: 'Inter', system-ui, sans-serif;
  --fw-font-size: 16px;

  /* Spacing */
  --fw-padding: 24px;
  --fw-gap: 16px;

  /* Borders */
  --fw-border-radius: 8px;
  --fw-border-width: 1px;
}

Available Properties

Colors

Typography

Spacing

Borders

Dark Mode

Automatic

Use theme="auto" to respect system preference:

<formwork-form theme="auto" ...></formwork-form>

Manual Toggle

Provide theme controls to users:

const form = document.querySelector('formwork-form');
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = form.getAttribute('theme');
  form.setAttribute('theme', current === 'dark' ? 'light' : 'dark');
});

Dark Mode Custom Properties

Override dark mode specifically:

@media (prefers-color-scheme: dark) {
  formwork-form {
    --fw-background: #0f172a;
    --fw-foreground: #f8fafc;
    --fw-border: #334155;
  }
}

/* Or when theme="dark" is set */
formwork-form[theme="dark"] {
  --fw-background: #0f172a;
  --fw-foreground: #f8fafc;
}

Component Styling

Buttons

formwork-form {
  --fw-button-padding: 12px 24px;
  --fw-button-radius: 6px;
  --fw-button-font-weight: 600;
}

Inputs

formwork-form {
  --fw-input-height: 44px;
  --fw-input-padding: 12px;
  --fw-input-border-width: 1px;
}

Labels

formwork-form {
  --fw-label-font-size: 14px;
  --fw-label-font-weight: 500;
  --fw-label-margin-bottom: 6px;
}

Preset Themes

Minimal

Clean, minimal appearance:

formwork-form {
  --fw-border-radius: 4px;
  --fw-border-width: 1px;
  --fw-padding: 16px;
  --fw-gap: 12px;
}

Rounded

Soft, rounded appearance:

formwork-form {
  --fw-border-radius: 12px;
  --fw-border-width: 2px;
  --fw-padding: 32px;
  --fw-gap: 20px;
}

Outlined

Prominent field outlines:

formwork-form {
  --fw-border-width: 2px;
  --fw-border: #0f172a;
  --fw-input: transparent;
}

Brand Integration

Matching Your Site

1. Use your brand’s primary color
2. Match your site’s font
3. Align border radius with your design system
4. Use consistent spacing

Example: Corporate Theme

formwork-form {
  --fw-primary: #0066cc;
  --fw-font-family: 'Helvetica Neue', Arial, sans-serif;
  --fw-border-radius: 4px;
  --fw-border: #cccccc;
  --fw-background: #fafafa;
}

Example: Modern Startup

formwork-form {
  --fw-primary: #8b5cf6;
  --fw-font-family: 'Inter', system-ui, sans-serif;
  --fw-border-radius: 12px;
  --fw-border: transparent;
  --fw-input: #f3f4f6;
}

Best Practices

Accessibility

• Maintain sufficient color contrast
• Don’t rely on color alone
• Keep focus indicators visible
• Test with screen readers

Performance

• Use system fonts for faster loading
• Avoid excessive custom fonts
• Keep theme CSS minimal

Consistency

• Match your site’s design language
• Use the same border radius throughout
• Maintain spacing consistency