<TraceItXProvider
config={{
apiKey: 'txx_live_…',
theme: {
accent: '#3b82f6',
accentForeground: '#ffffff',
surface: '#0b0f14',
},
}}
>The eight roles
| Role | Paints |
|---|---|
background | The reporter surface 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. The reporter is native UI rendered below the
bridge, so it cannot read your JS theme object, your Tailwind config or a
StyleSheet — the eight strings are the whole interface.
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, 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 app release.
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 lets a design team own brand colour
centrally while an app overrides one value locally — which matters more on
mobile, where changing the inline value means shipping a release.
On TV
The theme paints the native reporter, and on a TV there is none — reports are filed through the companion from a phone or the dashboard. The pairing badge and PIN card the TV shows are not themed.