Buyer experience theming | SeatLayer Developer Docs

Brand SeatPicker chrome, understand chart-versus-host precedence, and keep the buyer experience accessible.

SeatPicker combines the chart’s published theme with optional host overrides. The chart continues to paint the seating canvas; the host theme restyles the surrounding buyer interface.

Add a host theme

buyer/theme.jsjs

const picker = new seatlayer.SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  theme: {
    accent: "#e5484d",
    accentInk: "#ffffff",
    background: "#0b0f1a",
    surface: "#161d2e",
    text: "#eef1f8",
    muted: "#9ba3b5",
    line: "rgba(255,255,255,.14)",
    fontFamily: "Inter, sans-serif",
    radius: 12,
    logoUrl: "https://cdn.example.com/tickets-logo.svg",
    brandName: "Example Tickets",
  },
  hideBadge: true,
});

await picker.render();

All theme fields are optional.

Host field	Controls	Chart fallback
`accent`	Buttons, links, active controls, hold status	`accent`
`accentInk`	Text and icons on the accent	`accentInk`
`background`	Widget shell	`background`
`surface`	Cards and panels	None
`text`	Primary chrome text	`textColor`
`muted`	Secondary chrome text	None
`line`	Dividers and borders	None
`fontFamily`	Chrome typography	`fontFamily`
`radius`	Chrome corner radius in pixels	None
`logoUrl`	Header logo	`logoUrl`
`brandName`	Brand label or monogram source	`brandName`

Host values resolve to the widget’s --sl-* CSS tokens. Do not target internal picker class names; those are implementation details and may change.

Configure the canvas in Designer

These controls belong to the chart theme and apply everywhere the chart is rendered:

Designer control	Chart field	Notes
Canvas background	`background`	Canvas only; also seeds host background
Row labels	`rowLabelColor`	Falls back to general text color
Seat numbers	`seatLabelColor`	Checked for readable contrast
Selection	`selectionColor`	Hover and selected treatment
Décor	`decorFill`	Stages and shape blocks
Other chart text	`textColor`	Text objects
Brand accent	`accent`	Also seeds buyer chrome
Label font	`fontFamily`	Canvas labels
Seat size	`seatScale`	Clamped from `0.7` to `1.6`

SeatPicker.theme does not recolor individual seats or categories. Category colors, accessible-seat treatment, and the colorblind-safe palette stay part of the chart and picker rendering contract.

Logo, brand name, and attribution

The host logo wins over the chart logo. Without a logo, the picker can derive a monogram from the host brand name, chart brand name, or event name.

hideBadge is a top-level SeatPicker option, not a theme field. The chart can also carry an entitled white-label setting. Attribution is hidden when the applicable host or chart setting allows it.

Accessible branding checklist

Accent text and icons retain sufficient contrast.
Category colors remain distinguishable in the colorblind-safe view.
Focus rings are visible on every themed surface.
Logos include enough clear space and do not carry essential instructions.
Layout works at 320 CSS pixels and 200% browser zoom.
Light and dark host pages do not make the embedded boundary disappear.
Meaning is never communicated by color alone.

When to use each surface

Use host theming for a complete buyer flow with cart, timer, states, 3D, and checkout handoff.

Build your own surrounding controls. The map still uses the published chart theme and does not accept a SeatPickerTheme.

Use the published chart theme. The parent cannot pass host theme overrides into the framed page.

See Customization overview, localization, and the SeatPicker reference.