Theming

The web components are themed through CSS — no JavaScript configuration, no theme objects, no provider. The components consume DTCG tokens shipped in theme.css; overriding any of them at an ancestor element re-styles every descendant component.

Two layers:

1. Design tokens — CSS custom properties for colors, typography, spacing, and radii. Set on a parent selector, cascade into shadow DOM via inheritance.
2. CSS Parts — ::part(...) selectors for restyling a specific inner element when no token covers the change.

Tokens are the stable surface and one declaration can restyle every element on the page. Parts couple to internal structure, so prefer tokens when both are available.

How theme.css loads

<sw-call-widget> and <sw-click-to-call> auto-inject theme.css on first render. To control load order (override tokens before the widget mounts, or self-host the stylesheet), set disable-auto-theme on the widget and import explicitly:

1
import "@signalwire/web-components/theme.css";

1
<sw-call-widget disable-auto-theme token="…" destination="…"></sw-call-widget>

The auto-load also pulls SignalWire brand fonts (Lexend, Instrument Sans, JetBrains Mono) from Google Fonts. Set disable-auto-fonts if the site already self-hosts them.

Brand colors

For most apps, a handful of tokens is enough:

1
sw-call-widget,
2
sw-click-to-call {
3
  --interactive-button-primary-bg: #7c3aed;
4
  --interactive-button-primary-hover: #6d28d9;
5
  --interactive-status-success:     #10b981;
6
  --fg-emphasis:                    #7c3aed;
7
  --radius-md:                      12px;
8
  --type-family-body:               "Inter", sans-serif;
9
}

The full token surface groups into foreground / background, interactive (buttons, inputs), structure (border, radius, spacing, transition), and typography. Each web-component reference page lists the tokens it consumes — start at the Web Components reference.

Light theme

The defaults are tuned for dark UI. Scope light overrides to a wrapper; the bg / fg / border tokens propagate to the rest:

1
.light-section {
2
  --bg-page:        #fafbfc;
3
  --bg-surface:     #f3f4f6;
4
  --fg-default:     #1a1a18;
5
  --fg-muted:       #737371;
6
  --border-default: rgba(0, 0, 0, 0.1);
7
}

Combine with prefers-color-scheme to follow the visitor’s OS preference.

CSS Parts

Parts are named attachment points each component exposes for piercing shadow DOM.

1
sw-click-to-call::part(button) {
2
  border-radius: 999px;
3
  padding: 14px 28px;
4
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
5
}

Each reference page lists the parts the element exposes — see the Web Components reference.

Example

1
<style>
2
  .branded {
3
    --interactive-button-primary-bg: #7c3aed;
4
    --interactive-status-success:    #10b981;
5
    --radius-md:                     12px;
6
    --type-family-body:              "Inter", sans-serif;
7
  }
8
  .branded sw-click-to-call::part(button) {
9
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
10
  }
11
</style>
12
13
<div class="branded">
14
  <sw-click-to-call token="c2c_…" destination="/public/support" label="Talk to us"></sw-click-to-call>
15
</div>

For structural changes (layout, slot composition, swapping in controls), see Customization.