<TraceItXProvider
config={{
apiKey: 'txx_live_…',
theme: {
accent: '#3b82f6',
accentForeground: '#ffffff',
surface: '#0b0f14',
},
}}
>The eight roles
| Role | Paints |
|---|---|
background | The reporter window behind everything. |
surface | Cards, fields and raised areas. |
border | Hairlines between them. |
text | Primary copy. |
textMuted | Secondary copy, hints, counters. |
accent | Buttons, focus rings, the active tool. |
accentForeground | Text ON the accent — set it whenever you set accent. |
destructive | Delete and discard actions. |
Values are #rrggbb strings only — no named colours, no rgb(), no CSS
variables. Every value is checked against that shape before it reaches the page;
anything else is ignored rather than passed through.
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:
- Server theme — set in the dashboard, applies to every client
- Inline
theme— this config object - 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. Its default palette is
dark, and it looks the same on a light page and a dark one unless you theme it
— which means a light-mode product gets a dark reporter until you set the
background, surface and text roles yourself.
Set them together: a surface with default text on it is the same dark-on-dark
hazard any partial palette override has.