slidev-theme-—-deno-deploy.md

Slidev Theme — Deno Deploy

A presentation theme for Slidev inspired by the Deno Deploy console.

  • Open Source
  • Vue
  • CSS
Preview The Section Divider layout from the Slidev Deno Deploy theme, showing a numbered cyan badge, bold serif heading, and subtitle on a dark dotted background.
The Section Divider layout — numbered badges, Moranga headings, and the Deno Deploy dot grid background.
Repository donjo/slidev-theme-deno-deploy A Slidev theme inspired by Deno Deploy →

What it is

A theme for Slidev — the markdown-powered presentation framework — that takes its visual cues from the Deno Deploy console. It supports both light and dark mode and ships with a set of purpose-built layouts for technical talks.

Layouts

The theme includes 9 layouts designed around common presentation needs:

  • Title and Section Divider — for openers and section breaks, with numbered badges for dividers.
  • Content and Center — general-purpose slides for text, centered or left-aligned.
  • Two-Cols — a two-column layout with built-in screenshot support.
  • Screenshot — a full-width screenshot wrapped in browser chrome, with panning for tall images.
  • Screenshot Grid — 2–5 screenshots side by side or stacked, with click-to-reveal.
  • Video — full-width video in browser chrome, autoplaying muted and looped.
  • Diagram — a zoomable, pannable canvas for large diagrams like Mermaid charts. Scroll to zoom, drag to pan.

Design

The theme uses Moranga for serif headings and Recursive for sans-serif body text and monospace code — matching the typographic personality of the Deno Deploy console. Brand colors default to Deno's cyan and blue but are configurable through CSS custom properties.

Moranga is a commercial typeface and is not included in the theme. You'll need to purchase a license and add the font files to your project yourself. Recursive is open source and can be downloaded on their site.

Built with

Vue, CSS custom properties, and a bit of TypeScript.

TERMINAL
$