Theming

import type { FormTheme } from '@osforms/react';

interface FormTheme {
  colors?: FormThemeColors;
  fontFamily?: string;
  fontSize?: 'sm' | 'md' | 'lg';
  borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
  buttonVariant?: 'solid' | 'outline' | 'ghost'; // not applied yet: buttons are always solid
}

interface FormThemeColors {
  background?: string; // main background
  surface?: string; // card / input surface
  primary?: string; // button fill and accents
  text?: string; // primary text and labels
  textSecondary?: string; // descriptions and helper text
  border?: string; // input and card borders
  error?: string; // validation error color
}

<OSForm
  formId="abc123def456"
  theme={{
    colors: {
      background: '#ffffff',
      surface: '#f9fafb',
      primary: '#6366f1',
      text: '#111827',
      textSecondary: '#6b7280',
      border: '#e5e7eb',
      error: '#ef4444',
    },
    borderRadius: 'lg',
  }}
/>

import type { FormTheme } from '@osforms/react';

const lightTheme: FormTheme = {
  colors: {
    background: '#ffffff',
    surface: '#f9fafb',
    primary: '#111827',
    text: '#111827',
    textSecondary: '#6b7280',
    border: '#e5e7eb',
    error: '#ef4444',
  },
  fontFamily: '"Inter", sans-serif',
  fontSize: 'md',
  borderRadius: 'md',
  buttonVariant: 'solid',
};

<OSForm formId="abc123" theme={lightTheme} />;

'use client';

import { Inter } from 'next/font/google';
import { OSForm } from '@osforms/react';

const inter = Inter({ subsets: ['latin'] });

export function ContactForm() {
  return (
    <OSForm
      formId="abc123def456"
      theme={{ fontFamily: inter.style.fontFamily }}
    />
  );
}

import { ClassicRenderer } from '@osforms/react';
import type { FormSchema } from '@osforms/react';

export function MyForm({ schema }: { schema: FormSchema }) {
  return (
    <ClassicRenderer
      schema={schema}
      endpoint="https://osforms.com/api/v1/f/abc123def456"
      theme={{
        colors: {
          background: '#0a0a0a',
          surface: '#171717',
          primary: '#fafafa',
          text: '#fafafa',
          textSecondary: '#a3a3a3',
          border: '#262626',
          error: '#ef4444',
        },
        fontFamily: 'Inter, sans-serif',
        fontSize: '16px',
        borderRadius: '8px',
        buttonVariant: 'solid',
      }}
    />
  );
}