Theming the React viewer

Import @runstamp/react/styles.css for the default Runstamp identity. Components use CSS custom properties only—there is 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/react";
import "@runstamp/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",
        },
      }}
    />
  );
}

Theme objects become inline CSS custom properties on that component root, so multiple viewers can use different brands on the same page.

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/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 selects light/dark defaults with data-runstamp-theme. Explicit token values in a theme object are inline and take precedence over stylesheet declarations. Use a class or ancestor variables when normal CSS cascade and media queries should control the theme; use a theme object for an isolated instance.

These variables style the React preview controls. They do not rewrite the exported PowerPoint. To brand the native deck, set the declarative document's presentation tokens before compilation; keep both token sets aligned when preview/export parity matters.

Fonts

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

Accessibility

Keep signal colors distinguishable against both ground and surface; fidelity status also includes text and never depends on color alone. Preserve visible focus outlines, hairline borders, and readable muted text contrast when overriding variables.