Branding & theming

init({
  apiKey: 'txx_live_…',
  theme: {
    accent: '#3b82f6',
    accentForeground: '#ffffff',
    surface: '#0b0f14',
  },
});

The eight roles

Values are #rrggbb strings only — no named colours, no rgb(), no CSS variables. The reporter renders inside a Shadow DOM, so it cannot see your page’s custom properties, and a value it cannot parse is worse than a default.

That isolation cuts both ways, and it is the reason theming is a config object rather than a stylesheet: your page’s CSS cannot reach into the reporter, so a global button { } rule will not deform it — and equally, you cannot style it from outside. These eight roles are the whole surface.

Plan gating

Theming applies only once the server confirms a paid plan. On a free plan GET /api/config returns { "watermark": true }, the theme is suppressed entirely, and the reporter renders in default colours with a TraceItX mark.

That is a 200, not an error. An inline theme on a free plan is silently ignored rather than failing your build — so upgrading a plan themes the reporter with no code change and no redeploy.

Precedence

Per field, highest wins:

1. Server theme — set in the dashboard, applies to every client
2. Inline theme — this config object
3. Default

Per field, not per object: setting only accent in the dashboard and only surface here gives you both. That is what lets a design team own brand colour centrally while an app overrides one value locally.

Dark mode

The reporter does not follow prefers-color-scheme. It renders from a fixed set of CSS variables — a dark palette by default — so it looks the same in light and dark unless you theme it, which means a light product gets a dark reporter until you set the background, surface and text roles yourself.

Set them together: a light surface with the default light text on it is the same low-contrast hazard any partial palette override has.

Under a strict CSP

The reporter’s stylesheet is injected at runtime. Under a strict Content-Security-Policy that injection is blocked and the reporter renders unstyled — pass your nonce as cspNonce and it is threaded through both the stylesheet and the screenshot renderer.