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';
}

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

<OSForm
  formId="abc123"
  theme={{
    colors: { primary: '#6366f1', background: '#ffffff', text: '#111827' },
    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} />;

// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });

// In your form component:
<OSForm formId="abc123" theme={{ fontFamily: inter.style.fontFamily }} />;

import {
  ConversationalRenderer,
  useFormState,
  useFormSchema,
} from '@osforms/react';

// resolveTheme is not exported — pass theme overrides via OSForm
// or construct a ResolvedTheme manually for full control