Theming

type BrandTheme = {
  primary?: string;
  secondary?: string;
  background?: string;
  surface?: string;
  text?: string;
  muted?: string;
  success?: string;
  warning?: string;
  danger?: string;
  fontFamily?: string;
  fontHeading?: string;
  logoUrl?: string;
  headerImageUrl?: string;
  variant?: "default" | "retro" | "rounded" | "clean";
};

import { ExperienceWidget } from "@fanfare-io/fanfare-sdk-react";
import "@fanfare-io/fanfare-sdk-react/styles";

export function LaunchWidget() {
  return (
    <ExperienceWidget
      experienceId="exp_123"
      theme={{
        primary: "#0F766E",
        secondary: "#CCFBF1",
        background: "#FFFFFF",
        text: "#111827",
        fontFamily: "Inter, system-ui, sans-serif",
        fontHeading: "Instrument Serif, Georgia, serif",
        logoUrl: "https://cdn.example.com/logo.svg",
      }}
      variant="rounded"
    />
  );
}

import {
  ExperienceWidget,
  ThemeProvider,
} from "@fanfare-io/fanfare-sdk-react";

export function BrandedLaunchArea() {
  return (
    <ThemeProvider
      theme={{
        primary: "#8C14FF",
        surface: "transparent",
        fontFamily: "Inter, system-ui, sans-serif",
      }}
      variant="clean"
    >
      <ExperienceWidget experienceId="exp_123" autoStart />
    </ThemeProvider>
  );
}