Theming & Styling

Customize Pulse to match your brand using CSS custom properties.

How It Works

Override CSS variables on the <pulse-widget> element from your stylesheet:

pulse-widget {
  --pulse-primary: #e11d48;
}

That's it — the entire widget updates to use your color. No build step, no configuration files.

Available Properties

Property	Default	What It Changes
--pulse-primary	#6366f1	Buttons, badges, links, active states
--pulse-primary-hover	#4f46e5	Hover state of primary elements
--pulse-bg	#ffffff	Panel backgrounds
--pulse-bg-secondary	#f8fafc	Hover backgrounds, secondary surfaces
--pulse-text	#1e293b	Primary text
--pulse-text-secondary	#64748b	Secondary / muted text
--pulse-border	#e2e8f0	Borders and dividers
--pulse-radius	12px	Corner rounding on panels
--pulse-font	system-ui, sans-serif	Font family
--pulse-font-size	13px	Base text size
--pulse-shadow	0 8px 32px rgba(0,0,0,0.12)	Panel shadow

Examples

Your Brand Color

pulse-widget {
  --pulse-primary: #e11d48;     /* Rose */
  --pulse-primary-hover: #be123c;
}

Dark Mode

pulse-widget {
  --pulse-primary: #818cf8;
  --pulse-primary-hover: #6366f1;
  --pulse-bg: #1e1e2e;
  --pulse-bg-secondary: #2a2a3e;
  --pulse-text: #e2e8f0;
  --pulse-text-secondary: #94a3b8;
  --pulse-border: #334155;
  --pulse-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

Match Your Font

pulse-widget {
  --pulse-font: 'Inter', system-ui, sans-serif;
  --pulse-font-size: 14px;
}

Compact / Less Rounded

pulse-widget {
  --pulse-radius: 6px;
  --pulse-font-size: 12px;
}

Auto Dark Mode

Respond to the user's system preference:

@media (prefers-color-scheme: dark) {
  pulse-widget {
    --pulse-bg: #1a1a2e;
    --pulse-bg-secondary: #262640;
    --pulse-text: #e2e8f0;
    --pulse-text-secondary: #94a3b8;
    --pulse-border: #334155;
    --pulse-primary: #818cf8;
    --pulse-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}

Per-Widget Theming

Style different widgets independently:

<pulse-widget id="main-collab" ...></pulse-widget>
<pulse-widget id="sidebar-chat" ...></pulse-widget>

<style>
  #main-collab {
    --pulse-primary: #6366f1;
  }
  #sidebar-chat {
    --pulse-primary: #059669;
    --pulse-radius: 8px;
  }
</style>