Theming

Theme Options

Option	Type	Description
primary	string	Primary brand color (hex)
accent	string	Accent color (hex)
background	string	Background color (hex)
foreground	string	Text color (hex)
card	string	Card background color (hex)
border	string	Border color (hex)
radius	number	Border radius in pixels
darkMode	boolean	Enable dark mode

Basic Theming

Basic Themetypescript

Copy

const _si = new SpaceInvoices({
  apiKey: "ek_live_...",
  entityId: "ent_123",
  theme: {
    primary: "#6366f1", // Indigo
    radius: 8,
  },
});

Dark Mode

Dark Modetypescript

Copy

const _si = new SpaceInvoices({
  apiKey: "ek_live_...",
  entityId: "ent_123",
  theme: {
    primary: "#818cf8",
    darkMode: true,
  },
});

Full Customization

Full Theme Customizationtypescript

Copy

const _si = new SpaceInvoices({
  apiKey: "ek_live_...",
  entityId: "ent_123",
  theme: {
    primary: "#6366f1", // Primary buttons, links
    accent: "#8b5cf6", // Accents
    background: "#ffffff", // Page background
    foreground: "#1a1a1a", // Text color
    card: "#ffffff", // Card backgrounds
    border: "#e5e5e5", // Borders
    radius: 8, // Border radius (px)
    darkMode: false,
  },
});

Dynamic Theme Updates

Update the theme after initialization:

Dynamic Theme Updatetypescript

Copy

// Update primary color
si.updateTheme({
  primary: "#10b981",
});

// Switch to dark mode
si.updateTheme({
  primary: "#818cf8",
  darkMode: true,
});

// Reset to light mode
si.updateTheme({
  darkMode: false,
});

Theme Presets

Light Theme

theme: {
  primary: '#6366f1',
  accent: '#8b5cf6',
  background: '#ffffff',
  foreground: '#1a1a1a',
  card: '#ffffff',
  border: '#e5e5e5',
  radius: 8,
  darkMode: false,
}

Dark Theme

theme: {
  primary: '#818cf8',
  accent: '#a78bfa',
  background: '#0a0a0a',
  foreground: '#fafafa',
  card: '#171717',
  border: '#262626',
  radius: 8,
  darkMode: true,
}

Next Steps

• Events — Handle user actions
• Framework Examples — React, Vue integration