Theming

Override CSS custom properties on the host element to brand the widget — or set brandColor / position in the app config.

Last updated 2026-05-23

The widget renders inside a Shadow DOM so your site's CSS cannot leak into it (and vice versa). You theme it from outside by setting CSS custom properties on the <zupport-chat> host element.

Two ways to brand it

From the app (recommended for non-developers)

The Configure tab exposes the two most-used controls — brand colour and corner position. They are written to config.json and shipped to the embed:

// In the app: Configure tab → Brand color + Position.
// These two map straight to config.json:
{
  "brandColor": "#6f42c1",
  "position": "bottom-left"
}

From your page CSS (full control)

zupport-chat {
  --zupport-brand:        #6f42c1;
  --zupport-brand-fg:     #ffffff;
  --zupport-brand-hover:  #5a36a0;
  --zupport-radius:       12px;
  --zupport-panel-width:  420px;
  --zupport-font-body:    'Inter', system-ui, sans-serif;
}

Precedence

Page-level CSS variables win over config.json values for any property they explicitly set. Use that to override the brand colour for a single page or section without touching the app config.

Custom-property reference

Brand & interaction

Property	Default	Purpose
`--zupport-brand`	`#18553D`	Launcher background, primary buttons.
`--zupport-brand-fg`	`#fffefb`	Text colour on brand surfaces.
`--zupport-brand-hover`	`#0d3a27`	Hover state of brand buttons.
`--zupport-brand-soft`	`#d6e4d8`	Light brand tint (selected, hover backgrounds).
`--zupport-accent`	`#b8552e`	Accent colour (terracotta).
`--zupport-accent-soft`	`#f0d7c5`	Light accent tint.

Surfaces & text

Property	Default	Purpose
`--zupport-bg`	`#f7f3ea`	Page-level background of the panel.
`--zupport-surface`	`#fffefb`	Chat panel surface.
`--zupport-surface-2`	`#efe9db`	Secondary surface (assistant bubbles).
`--zupport-surface-3`	`#e5decc`	Tertiary surface.
`--zupport-fg`	`#131c18`	Primary text.
`--zupport-ink-2`	`#3d4843`	Secondary text.
`--zupport-ink-3`	`#6e7873`	Muted text.
`--zupport-muted`	`#a19f92`	Disabled text.
`--zupport-line`	`#ddd5c4`	Borders and dividers.
`--zupport-line-strong`	`#c9c0ab`	Stronger borders.

Status & shadows

Property	Default	Purpose
`--zupport-status-dot`	`#6fd5a8`	Online indicator dot.
`--zupport-good`	`#2e7d5a`	Success.
`--zupport-warn`	`#b58a3a`	Warning.
`--zupport-bad`	`#a23e2a`	Error.
`--zupport-shadow`	brand-tinted	Base shadow used inside the panel.
`--zupport-shadow-launcher`	brand-tinted	Shadow under the launcher button.
`--zupport-shadow-panel`	ink-tinted	Shadow under the open chat panel.

Spacing, typography, layout

Property	Default	Purpose
`--zupport-radius`	`18px`	Default radius.
`--zupport-radius-panel`	`18px`	Chat panel radius.
`--zupport-radius-bubble`	`14px`	Message bubble radius.
`--zupport-z-index`	`2147483000`	Stacking order.
`--zupport-font-display`	`'Fraunces', serif`	Display font.
`--zupport-font-body`	`'DM Sans', system-ui, sans-serif`	Body font.
`--zupport-font-mono`	`'JetBrains Mono', monospace`	Mono font.
`--zupport-font-size`	`14px`	Base font size.
`--zupport-panel-width`	`384px`	Open panel width.
`--zupport-panel-height`	`min(560px, 80vh)`	Open panel height.

Match your existing design system

Map the variables you care about to your own tokens, e.g. --zupport-brand: var(--brand-500). The Shadow-DOM isolation means you only need to forward the variables you want shared.