Marp Theme

VS Code / Cursor extension to manage standalone Marp theme CSS globally: discover themes, import them, pick an active theme for preview and export, without copying CSS into every slide deck.

Requires Marp for VS Code.

Marketplace: purestone.marp-theme
Repository: Purestone/marp-theme-vscode

Why this extension exists

Marp for VS Code only loads custom themes from:

• http(s)://… URLs, or
• paths inside the current workspace

Absolute / file:// paths outside the workspace are ignored. Relative url(./fonts/…) in theme CSS also resolves against the Markdown file, not the CSS file—so ordinary theme packs break when you open a deck elsewhere.

Marp Theme works around that by:

1. Discovering standalone theme CSS (fonts and images embedded as data: URIs)
2. Serving them from a local http://127.0.0.1:<port>/… server
3. Registering those URLs in markdown.marp.themes (user + workspace settings)

Any Marp Markdown can then use theme: your-theme-name for preview and export.

Install

From the Marketplace:

code --install-extension purestone.marp-theme

Or search Marp Theme in the Extensions view. After install, Developer: Reload Window, then run Marp Theme: Refresh Theme List.

Bundled themes

@theme name	Look
usyd-ochre	University of Sydney–style chrome in Beamer ochre #EC5F32 (title / top bar / lead)
usyd-black	Same layout with black chrome; accent still #EC5F32

Both include GitHub Prettylights–style highlight.js colors for fenced code blocks (aligned with Marp’s default highlighter).

Theme sources

Location	Role
Extension themes/	Bundled standalone CSS
Extension global storage …/marp-theme/themes/	Themes added via Import Standalone CSS…
Workspace themes/	Auto-scanned when a folder is open
marpTheme.themesFolders	Extra directories listed in settings

Standalone CSS rules

A file is accepted only if:

• It starts with /* @theme theme-name */
• It does not use local url(./…), url(../…), or absolute file: / disk paths

Embed fonts and images as data: URIs (or use remote https: URLs).

Select Active Theme

Command: Marp Theme: Select Active Theme…

Choice	Effect
(none)	Clears marpTheme.activeTheme and removes theme: from the current Marp frontmatter
default	Sets Marp’s built-in theme: default
Custom name	Sets that registered @theme and applies it to the open Marp document when possible

Empty active theme means “do not force a theme.” Per-file theme: is left alone until you Select / Apply.

Settings

Setting	Description
marpTheme.activeTheme	Active theme name. Empty = none. default = Marp stock theme. Otherwise a registered custom @theme.
marpTheme.importedThemes	List of imported theme names (synced from the import folder). Remove an entry to delete that imported CSS file.
marpTheme.themesFolders	Extra folders of standalone .css files
marpTheme.autoApply	If active theme is set: fill missing theme: on open; sync the current doc when active theme changes
marpTheme.registerWithMarp	Register discovered themes as localhost HTTP URLs in markdown.marp.themes

Commands

• Marp Theme: Select Active Theme…
• Marp Theme: Apply Active Theme to Document
• Marp Theme: Import Standalone CSS…
• Marp Theme: Delete Imported Theme…
• Marp Theme: Refresh Theme List
• Marp Theme: Open Themes Folder
• Marp Theme: New Slide Deck

Usage

1. Install this extension and Marp for VS Code.
2. Marp Theme: Select Active Theme… → e.g. usyd-ochre.
3. Open Markdown preview with Marp enabled, or export via Marp’s export command.

---
marp: true
theme: usyd-ochre
paginate: false
size: 16:9
math: mathjax
---

<!-- _class: title -->

# Title

Subtitle

Slide classes (bundled USYD themes)

Markup	Role
<!-- _class: title -->	Title slide (ochre or black background; logo bottom-right)
Lone # Heading	Section divider
## Heading	Content slide (title in the top bar)
<!-- _class: lead -->	Centered closing slide
<div class="columns">	Two-column layout
<span class="accent">	Accent-colored emphasis

Development

# From the extension repo root
npm run package    # builds .vsix
npm run publish    # publishes to Marketplace (publisher credentials required)

Rebuild bundled themes from the sibling template project (if present):

python3 ../scripts/build-standalone.py   # also syncs into extension/themes/

License

MIT