Theming

Override CSS custom properties to match your design system. All components use these variables for consistent styling.

CSS Custom Properties

:root {
  /* Panel */
  --sfu-panel-bg: #ffffff;
  --sfu-panel-border: #e5e7eb;
  --sfu-panel-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Text */
  --sfu-text-primary: #111827;
  --sfu-text-secondary: #6b7280;

  /* Progress */
  --sfu-progress-bg: #e5e7eb;
  --sfu-progress-fill: #3b82f6;

  /* Status colors */
  --sfu-success: #22c55e;
  --sfu-error: #ef4444;
  --sfu-warning: #f59e0b;

  /* Layout */
  --sfu-radius: 12px;
  --sfu-font-family: system-ui, -apple-system, sans-serif;
}

Dark Mode Example

:root.dark {
  --sfu-panel-bg: #1f2937;
  --sfu-panel-border: #374151;
  --sfu-panel-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --sfu-text-primary: #f9fafb;
  --sfu-text-secondary: #9ca3af;
  --sfu-progress-bg: #374151;
}

Brand Customization

/* Example: match a purple brand */
:root {
  --sfu-progress-fill: #8b5cf6;
  --sfu-success: #10b981;
  --sfu-radius: 8px;
  --sfu-font-family: 'Inter', system-ui, sans-serif;
}