SigSentry Documentation

The SDK ships with neutral defaults that blend into most product UIs. Override CSS variables to match your brand, or pass a theme prop for light/dark/auto.

Light, dark, auto

Set the theme prop on the provider:

<SigSentryProvider apiKey={key} theme="auto">
  <AnalysisWidget />
</SigSentryProvider>

Value	Behavior
`'light'`	Always light
`'dark'`	Always dark
`'auto'`	Follows the OS `prefers-color-scheme` and updates live

The provider sets data-theme="light" or data-theme="dark" on its wrapper; all SDK components read CSS variables scoped to that attribute.

Importing the variables file

The default variables are inlined automatically. To override them globally, import the variables stylesheet once and override in your own CSS:

// app/layout.tsx (Next.js) or src/main.tsx (Vite)
import '@sigsentry/react/styles';

Then in your global CSS:

:root {
  --tb-color-primary: #6366f1;
  --tb-color-primary-text: #ffffff;
  --tb-border-radius: 10px;
}

CSS variable reference

Every variable is namespaced --tb-*. Override any of them on :root (light) or [data-theme='dark'] (dark).

Colors

Variable	Default (light)	Default (dark)
`--tb-color-primary`	`#111827`	`#e4e2de`
`--tb-color-primary-hover`	`#1f2937`	`#d1cfc9`
`--tb-color-primary-text`	`#ffffff`	`#0a0a0f`
`--tb-color-bg`	`#ffffff`	`#0a0a0f`
`--tb-color-bg-secondary`	`#f9fafb`	`#111118`
`--tb-color-text`	`#111827`	`#e4e2de`
`--tb-color-text-secondary`	`#6b7280`	`#8b8b99`
`--tb-color-text-muted`	`#9ca3af`	`#5a5a66`
`--tb-color-border`	`#e5e7eb`	`#1e1e2a`

Severity colors

Used by the result display. Override these to align with your existing severity palette.

Variable	Default (light)	Default (dark)
`--tb-color-critical`	`#dc2626`	`#ef4444`
`--tb-color-high`	`#ea580c`	`#f97316`
`--tb-color-medium`	`#ca8a04`	`#eab308`
`--tb-color-low`	`#2563eb`	`#3b82f6`
`--tb-color-info`	`#6b7280`	`#6b7280`

Typography

Variable	Default
`--tb-font-family`	System sans (`-apple-system`, `Segoe UI`, `Roboto`, …)
`--tb-font-size-xs`	`0.75rem`
`--tb-font-size-sm`	`0.875rem`
`--tb-font-size-base`	`0.9375rem`
`--tb-font-size-lg`	`1.125rem`

Layout

Variable	Default
`--tb-border-radius`	`6px`
`--tb-spacing-unit`	`4px`

Matching a host design system

A typical override file — primary color, radius, and font family pulled from the host app's tokens:

@import '@sigsentry/react/styles';

:root {
  --tb-color-primary: var(--brand-accent);
  --tb-color-primary-text: var(--brand-accent-on);
  --tb-color-bg: var(--surface-1);
  --tb-color-bg-secondary: var(--surface-2);
  --tb-color-border: var(--surface-border);
  --tb-color-text: var(--text-primary);
  --tb-color-text-secondary: var(--text-secondary);

  --tb-border-radius: var(--radius-md);
  --tb-font-family: var(--font-sans);
}

[data-theme='dark'] {
  --tb-color-primary: var(--brand-accent-dark);
  --tb-color-bg: var(--surface-1-dark);
  --tb-color-bg-secondary: var(--surface-2-dark);
  --tb-color-border: var(--surface-border-dark);
  --tb-color-text: var(--text-primary-dark);
  --tb-color-text-secondary: var(--text-secondary-dark);
}

The --tb- prefix is preserved for backward compatibility. New variables added to the SDK will use the same prefix — your overrides won't break across SDK versions.

Scoping overrides

CSS variables cascade, so you can scope overrides to just the SDK subtree if your global tokens conflict:

<div className="sigsentry-scope">
  <SigSentryProvider apiKey={key}>
    <AnalysisWidget />
  </SigSentryProvider>
</div>

.sigsentry-scope {
  --tb-color-primary: #6366f1;
  --tb-border-radius: 12px;
}

Theming