@pulumi/slidev-theme

A Slidev theme for Pulumi presentations.

• Light + dark color schemas (palette flips per brand spec)
• Inter (variable) and Monaspace Neon, bundled — no CDN
• Brand violet primary, accent bar, and decorative line graphics
• Color SVG logos in the footer with light/dark variants
• 13 layouts: cover, default, section, two-cols, image-left, image-right, code, diagram, diagram-left, diagram-right, quote, statement, end
• Shiki code highlighting with brand-violet backgrounds (min-light / min-dark)
• Brand-themed Mermaid diagrams (light + dark) for every ```mermaid block

Start a new deck

Create a project, install Slidev and this theme, and copy the starter deck.

pnpm

mkdir my-talk && cd my-talk
pnpm init
pnpm add -D @slidev/cli @pulumi/slidev-theme
cp node_modules/@pulumi/slidev-theme/starter.md slides.md
pnpm exec slidev slides.md --open

npm

mkdir my-talk && cd my-talk
npm init -y
npm install -D @slidev/cli @pulumi/slidev-theme
cp node_modules/@pulumi/slidev-theme/starter.md slides.md
npx slidev slides.md --open

starter.md is a ready-to-edit deck that exercises every layout, with theme: "@pulumi/slidev-theme" already set in its frontmatter. Edit the copied slides.md to build your presentation.

Build and export

From your deck directory:

pnpm exec slidev build slides.md     # static site → dist/
pnpm exec slidev export slides.md    # PDF

Use npx or bunx in place of pnpm exec to match your package manager. PDF export needs a one-time browser download — run pnpm exec playwright install chromium first. See the Slidev docs on building and hosting and exporting for the full reference.

Layouts

| Layout | When to use | | --- | --- | | cover | Title slide. Big heading, accent lines top-right. | | section | Section divider. Title + subtitle, accent lines bottom-right. | | default | General content. Heading + body. | | two-cols | Side-by-side via the ::right:: named slot. | | image-left | Image on the left, content on the right. image frontmatter sets the source. | | image-right | Image on the right, content on the left. | | code | Code-focused slides. Larger code area, tighter heading spacing. | | diagram | A single Mermaid diagram (or figure) centered in the body. Optional heading above the ```mermaid block. | | diagram-left | Diagram on the left, text on the right. Text in the default slot, diagram in the ::diagram:: slot. | | diagram-right | Diagram on the right, text on the left. Text in the default slot, diagram in the ::diagram:: slot. | | quote | Pull quote with attribution. author and role frontmatter. | | statement | One large centered statement. Use **bold** for primary-color emphasis. | | end | Closing slide. Defaults to "Thank you." |

Per-slide dark mode

Any layout can be forced dark with class: dark in the slide frontmatter:

---
layout: section
class: dark
---

# This section is dark

Mermaid diagrams

Any ```mermaid block is automatically styled with the Pulumi brand Mermaid theme (setup/mermaid.ts) — fills, borders, edges, and text all come from brand tokens, across every Mermaid v11 diagram type. The theme is driven by CSS custom properties, so diagrams repaint for both the global dark toggle and a per-slide class: dark with no extra config.

Diagrams need Mermaid installed in your deck:

pnpm add -D mermaid

Use the diagram, diagram-left, or diagram-right layouts to place a diagram, and scale it from the fence:

---
layout: diagram-right
---

# How a deployment flows

- Narrative on the left
- Diagram on the right

::diagram::

```mermaid {scale: 0.8}
flowchart LR
  Dev[Developer] --> CLI[Pulumi CLI] --> Cloud[(Cloud)]
```

This brand theme is ported from the docs site's portable, dependency-free module (pulumi/docs → static/js/pulumi-mermaid-theme.js). Light mode matches it exactly; dark mode is reproduced from the same brand tokens via the token layer.

Brand tokens

CSS custom properties from styles/tokens.css:

| Token | Light | Dark | | --- | --- | --- | | --p-primary | #5a30c5 (violet-700) | #c3bdff (violet-700 dark) | | --p-accent-bar | #5a30c5 (violet-700) | #5a30c5 (same) | | --p-bg | #ffffff | #231f33 (violet-50 dark) | | --p-bg-elevated | #f5f5ff (violet-50) | #392960 (violet-100 dark) | | --p-fg | #1f1b21 (service black) | #ffffff |

The full violet and gray scales (50–950) are exposed as --p-violet-* and --p-gray-*. The dark-mode palette flips so --p-violet-700 always means "the primary brand color for the current mode."

Structure

@pulumi/slidev-theme/
├── components/        # Auto-registered Vue components
│   ├── AccentLines.vue
│   └── PulumiFooter.vue
├── layouts/           # 13 layout .vue files
├── public/            # Static assets served at /
│   ├── fonts/         # InterVariable + Monaspace Neon woff2
│   ├── lines.svg
│   └── logos/
├── setup/
│   ├── shiki.ts       # Brand-violet code backgrounds (Min Light / Min Dark)
│   └── mermaid.ts     # Brand Mermaid theme (token-driven, light + dark)
├── styles/
│   ├── index.ts       # Theme entry — auto-loaded by Slidev
│   ├── fonts.css      # @font-face declarations
│   ├── tokens.css     # Brand color tokens + Slidev var mappings
│   └── base.css       # Typography, lists, code, tables
└── starter.md         # Ready-to-edit deck exercising every layout

Releasing (maintainers)

Publishing to npm is automated by the Publish @pulumi/slidev-theme GitHub Action (.github/workflows/publish-slidev-theme.yml), which runs on any pushed tag matching slidev-theme/v*.

The published version comes from the tag, not the version field in package.json — the workflow rewrites that field from the tag name before it runs pnpm publish. To cut a release, push a tag with the next version (valid semver, and not already on npm):

git tag slidev-theme/v0.3.0
git push origin slidev-theme/v0.3.0

Keep the version field in package.json roughly in sync for clarity, but the tag is the source of truth.