Theming the React viewer

Import @runstamp/sdk/react/styles.css for the default look. Components use CSS custom properties only, with no runtime CSS-in-JS dependency.

Built-in modes

Pass theme="light" or theme="dark" to a component. A DeckTheme object can set the mode and scoped tokens together:

import { DeckViewer, type DeclarativeDocument } from "@runstamp/sdk/react";
import "@runstamp/sdk/react/styles.css";

const document: DeclarativeDocument = {
  title: "Themed deck",
  slides: [{ layout: "title", title: "A scoped dark viewer" }],
};

export default function ThemedViewer() {
  return (
    <DeckViewer
      deck={document}
      theme={{
        mode: "dark",
        tokens: {
          accent: "#86A9DC",
          ground: "#0B1017",
          surface: "#111925",
          ink: "#F3F6FA",
          border: "#344152",
        },
      }}
    />
  );
}

A theme object sets inline CSS custom properties on its component root, so viewers on one page can use different brands.

CSS token contract

Set these variables on a component class or any ancestor:

.acme-runstamp {
  --runstamp-accent: #4f6f99;
  --runstamp-ground: #f2f5f8;
  --runstamp-surface: #ffffff;
  --runstamp-ink: #15202d;
  --runstamp-muted-ink: #627083;
  --runstamp-border: #cbd3dd;
  --runstamp-signal-green: #23855b;
  --runstamp-signal-amber: #a36c14;
  --runstamp-signal-red: #bd3b43;
  --runstamp-font-sans: "Satoshi", system-ui, sans-serif;
  --runstamp-font-mono: "Geist Mono", ui-monospace, monospace;
}

import { DeckToolbar, type DeclarativeDocument } from "@runstamp/sdk/react";

const document: DeclarativeDocument = {
  title: "CSS theme example",
  slides: [{ layout: "title", title: "Acme quarterly review" }],
};

export default function BrandedToolbar() {
  return <DeckToolbar deck={document} className="acme-runstamp" />;
}

Scope and precedence

The theme prop sets the light or dark default with data-runstamp-theme. Inline token values override stylesheet declarations. For CSS-controlled themes, use a class or ancestor variables. Use a theme object for one isolated instance.

These variables style the React preview controls. They do not change the exported PowerPoint. To brand the native deck, set the document's presentation tokens before compilation. Keep both token sets aligned if preview and export must match.

Fonts

The default stacks prefer Satoshi for sans text and Geist Mono for labels. The stylesheet does not download fonts. Load licensed webfonts in your app, then point --runstamp-font-sans and --runstamp-font-mono at their family names.

Accessibility

Keep signal colors distinct on both ground and surface. Fidelity status always includes text, never color alone. When you override variables, keep focus outlines, hairline borders and readable muted text.