Marp theme builder
Pick a base, fonts, sizes and colours; the CSS is generated and previewed on a sample deck. Download it or send it to the editor.
What the builder generates
A theme file that starts with /* @theme name */, imports the base theme (default, gaia or uncover) and overrides what you set: font families (with a Google Fonts import when needed), the body and heading sizes, table and code sizes, text, background, accent and muted colours, alignment and padding, the page number's position and an optional "N / total". The classes at the bottom are the ones lecture decks keep needing: lead, divider, columns, box, source, invert.
How to use the CSS
| Where | How |
|---|---|
| This site's editor | Use in editor stores the theme in your browser and opens the editor with it selected. |
| marp-cli | Save it as themes/name.css, run marp deck.md --theme-set themes/ --pdf, and set theme: name in the deck. |
| VS Code | Add the file path to markdown.marp.themes in the workspace settings (guide). |
| Lecture Studio | Put the file in the library's themes/ folder; decks that name it render with it. |
Advice
- A lecture theme wants a base of 20–24 px, left alignment and top justification; the built-in themes are keynote-sized (29, 35 and 40 px). See Marp font size.
- Google Fonts are loaded by the renderer at view time; for an offline PDF pick a system font or install the font on the exporting machine.
- Keep the accent for headings and emphasis only; body text in colour is hard to read from the back row.
- The dark preset swaps text and background and softens the accent; check contrast on a projector, which washes out dark themes.
Background on themes: Marp themes for lectures, header, footer and page numbers.
Questions
How do I make a custom Marp theme?
A CSS file that begins with /* @theme name */, optionally @import 'default', then rules on section, headings and your own classes. This builder writes that file for you.
Can I use Google Fonts in a Marp theme?
Yes: an @import url('https://fonts.googleapis.com/…') line at the top of the theme, which the builder adds when you pick a Google font. The machine that renders the deck needs network access to load it.
How do I change the page number position?
Style section::after: its left, right and bottom set the position; content can add the total with attr(data-marpit-pagination-total).
Does the theme work in marp-cli and VS Code?
Yes. It is a standard Marp theme file: --theme-set in marp-cli, markdown.marp.themes in VS Code.