TPTruPDF

Theming

CSS custom properties — change values, never per-component styles. All tokens live in packages/core/src/styles/tokens.css and apply at :root, .trupdf-viewer, [data-theme="light|dark"].

Theme switching

<DocViewer source="…" theme="system" licenseManager={license} />

theme writes data-theme to the viewer root and to <html> so portalled flyouts and modals inherit the palette.

Values: 'light', 'dark', 'system'. System honours prefers-color-scheme.

Spacing scale

--trupdf-space-0: 0;
--trupdf-space-1: 4px;
--trupdf-space-2: 8px;
--trupdf-space-3: 12px;
--trupdf-space-4: 16px;
--trupdf-space-5: 24px;
--trupdf-space-6: 32px;

Sizing

--trupdf-icon-size: 18px;
--trupdf-icon-size-sm: 14px;
--trupdf-icon-size-lg: 22px;
--trupdf-button-size: 36px; /* desktop hit target */
--trupdf-button-size-touch: 44px; /* coarse pointer */
--trupdf-button-size-sm: 28px; /* dense rows */
--trupdf-toolbar-height: 48px;
--trupdf-toolbar-width: 56px; /* vertical headers */
--trupdf-ribbon-row-height: 56px;
--trupdf-panel-width: 320px;
--trupdf-style-dock-width: 280px;
--trupdf-tab-rail-width: 64px;

@media (pointer: coarse) auto-bumps --trupdf-button-size to the -touch value — no manual flag needed for mobile.

Radii

--trupdf-radius-sm: 3px;
--trupdf-radius-md: 6px;
--trupdf-radius-lg: 10px;
--trupdf-radius-pill: 999px;

Z-index layers

--trupdf-z-page: 1;
--trupdf-z-text-layer: 2;
--trupdf-z-annotation-layer: 5;
--trupdf-z-toolbar: 10;
--trupdf-z-floating-header: 20;
--trupdf-z-flyout: 50;
--trupdf-z-popover: 60;
--trupdf-z-modal-backdrop: 90;
--trupdf-z-modal: 100;
--trupdf-z-toast: 110;

Motion

--trupdf-anim-fast: 120ms;
--trupdf-anim-base: 200ms;
--trupdf-anim-slow: 320ms;
--trupdf-ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);

Auto-zeroed when prefers-reduced-motion: reduce.

Typography

--trupdf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--trupdf-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
--trupdf-font-size-xs: 0.65rem;
--trupdf-font-size-sm: 0.8rem;
--trupdf-font-size-base: 0.875rem;
--trupdf-font-size-md: 0.95rem;
--trupdf-font-size-lg: 1.1rem;
--trupdf-font-weight-normal: 400;
--trupdf-font-weight-medium: 500;
--trupdf-font-weight-bold: 600;
--trupdf-line-height: 1.4;

Color tokens

Backgrounds

--trupdf-bg: #1f1f1f;
--trupdf-bg-elevated: #2c2c2c;
--trupdf-bg-pressed: #3a3a3a;
--trupdf-bg-hover: rgba(255, 255, 255, 0.06);
--trupdf-bg-page: #2b2b2b; /* viewer outer */
--trupdf-bg-panel: #1b1b1b;
--trupdf-bg-toolbar: #1f1f1f;
--trupdf-bg-tab-rail: #181818;

Foregrounds

--trupdf-fg: #f5f5f5;
--trupdf-fg-muted: #aaa;
--trupdf-fg-subtle: #888;
--trupdf-fg-disabled: rgba(245, 245, 245, 0.4);
--trupdf-fg-inverse: #1a1a1a;

Accent / status

--trupdf-accent: #1976d2;
--trupdf-accent-hover: #1565c0;
--trupdf-accent-pressed: #0d47a1;
--trupdf-accent-fg: #fff;
--trupdf-accent-bg-soft: rgba(25, 118, 210, 0.13);
--trupdf-accent-bg-subtle: rgba(25, 118, 210, 0.08);
--trupdf-danger: #d32f2f;
--trupdf-danger-hover: #b71c1c;
--trupdf-danger-fg: #fff;
--trupdf-danger-text: #f4b6b6;
--trupdf-warning: #f57c00;
--trupdf-success: #388e3c;

Borders / focus

--trupdf-border: #333;
--trupdf-border-strong: #444;
--trupdf-border-subtle: #2a2a2a;
--trupdf-focus-ring: rgba(25, 118, 210, 0.45);

Brand override

.trupdf-viewer[data-theme='light'] {
  --trupdf-accent: #2563eb;
  --trupdf-accent-hover: #1d4ed8;
  --trupdf-accent-pressed: #1e40af;
  --trupdf-bg: #ffffff;
  --trupdf-bg-panel: #f8fafc;
  --trupdf-fg: #0f172a;
}

Apply the class to a parent wrapper if you want to scope the override to one instance. The viewer doesn't paint root-level styles into document.body — every token is namespaced.

Touch-target override

.trupdf-viewer {
  --trupdf-button-size: 40px;
}
@media (pointer: coarse) {
  .trupdf-viewer {
    --trupdf-button-size: 48px;
  }
}

High-contrast

.trupdf-viewer[data-theme='high-contrast'] {
  --trupdf-bg: #000;
  --trupdf-fg: #fff;
  --trupdf-accent: #ffff00;
  --trupdf-border: #fff;
  --trupdf-focus-ring: #ffff00;
}

Then set theme="high-contrast" (any string is accepted as data-theme).