---
title: "Buyer experience theming"
description: "Brand SeatPicker chrome, understand chart-versus-host precedence, and keep the buyer experience accessible."
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.seatlayer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Buyer experience theming

`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

```js title="buyer/theme.js"
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.

> **Confirm entitlement before launch**
>
> Do not treat a client-side flag as a billing entitlement. Verify your plan
> and the published result in the real buyer surface.

## 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

### SeatPicker

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

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

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

See [Customization overview](/customization/overview),
[localization](/customization/localization), and the
[SeatPicker reference](/buyer-sdk/seat-picker).

Source: https://docs.seatlayer.io/customization/buyer-experience/index.mdx