Theming

A page that embeds the viewer or the play panel can restyle it from its own stylesheet. Light and dark follow the visitor’s system, and data-theme="light" or "dark" on the root forces one.

site.css

:root {
  --sb-accent: #e11d48;
  --sb-accent-hover: #be123c;
  --sb-font-sans: "Inter", system-ui, sans-serif;
  --sb-radius-card: 14px;
}

The variables cover surfaces (--sb-bg, --sb-surface, --sb-border), text, accent, status colors, one color per HTTP method, code colors, fonts, radii and spacing. For changes to its structure, the play panel also exposes ::part(panel), ::part(header), ::part(timeline) and ::part(play).