Widget Theming

The widget uses CSS Custom Properties for theming. Set them on the <senda-chat> element or globally on :root.

Available Properties

Property	Default	Description
--senda-primary-color	#6366f1	Primary accent (buttons, links)
--senda-primary-hover-color	#4f46e5	Hover state for primary
--senda-bg-color	#0f172a	Chat panel background
--senda-surface-color	#1e293b	Header, input area
--senda-border-color	#334155	Borders and separators
--senda-text-color	#f1f5f9	Primary text
--senda-text-muted-color	#94a3b8	Secondary text
--senda-border-radius	16px	Panel border radius
--senda-font-family	Inter, system-ui	Font family

Example: Light Theme

<senda-chat 
  api-key="sk_live_YOUR_KEY"
  style="
    --senda-primary-color: #2563eb;
    --senda-bg-color: #ffffff;
    --senda-surface-color: #f8fafc;
    --senda-border-color: #e2e8f0;
    --senda-text-color: #1e293b;
    --senda-text-muted-color: #64748b;
  "
></senda-chat>

Example: Brand Colors

<senda-chat 
  api-key="sk_live_YOUR_KEY"
  style="
    --senda-primary-color: #e11d48;
    --senda-font-family: 'Poppins', sans-serif;
    --senda-border-radius: 8px;
  "
></senda-chat>