Create custom Marp presentation themes from a description or vibe. Asks about the aesthetic, audience, and feel, then generates production-ready theme CSS. Detects the i-impeccable skill for enhanced design guidance. Triggers on: marp theme, create a theme, presentation theme, slide theme, or any request to design a custom look for Marp presentations.
Create custom Marp presentation themes through a guided conversation. Generates production-ready CSS that works with @marp-team/marp-cli.
Before writing any CSS, read references/marp-theme-anatomy.md bundled with this skill — it contains hard-won knowledge about Marp's specificity model, CSS variable overrides, and syntax highlighting that will save you from invisible code blocks and stubborn left borders.
/marp-theme-creatorSilently check whether the i-impeccable skill (or impeccable) is available. You can detect this by checking if it appears in your available skills list.
If i-impeccable IS available: You have access to professional design thinking. Use its principles throughout — especially the font selection procedure (avoid the reflex font list), colour principles (OKLCH, tinted neutrals, 60-30-10), spatial rhythm, and the AI slop test. Do NOT invoke the skill directly or run its teach flow — just apply its principles as you design.
Key i-impeccable principles to apply:
If i-impeccable is NOT available: You can still make good themes. Focus on clear hierarchy, readable contrast, and a cohesive palette. Avoid the most common AI design tells (left-border stripes, gradient text, cyan-on-dark).
If the user gave a description as an argument (e.g. /marp-theme-creator fans of early 60s UK sci-fi), use that as the starting brief. Otherwise ask.
The vibe:
Describe the feel you're after — a genre, an era, a mood, a reference. "1970s Open University lecture" or "Japanese train station signage" or "cosy bookshop in Edinburgh" all work. The more specific and vivid, the better.
The audience:
Who will see these presentations? Technical developers? University students? A conference audience? Children? This affects type size, density, and tone.
Light or dark:
Any preference? If not, I'll choose based on the vibe. (A noir detective theme wants dark. A summer garden party theme wants light.)
Anything that must or mustn't appear:
Specific colours to include? Logos? Anything to avoid?
Don't ask about CSS, Marp directives, font names, or technical details. That's your job.
Work through these decisions before writing any CSS.
Pick a short, lowercase, hyphenated name that captures the vibe: retro-sci-fi, cosy-bookshop, cat-enthusiast, brutalist-concrete. This becomes the /* @theme name */ identifier.
Pick 3–5 colours that embody the brief:
Also choose:
If i-impeccable is available: tint your neutrals toward the dominant hue. Use OKLCH thinking — reduce chroma at extreme lightness values.
Pick TWO fonts from Google Fonts:
Also pick a monospace font for code blocks.
If i-impeccable is available: follow the font selection procedure. Write down 3 words for the brief's voice. List the 3 fonts you'd normally reach for. Reject any on the reflex list. Browse further. Cross-check that your pick doesn't just confirm the pattern you're trying to break.
If i-impeccable is NOT available: aim for something distinctive that fits the brief. Avoid Inter, Roboto, Open Sans, and Arial. A serif + sans-serif pairing usually works well. Check Google Fonts for availability.
Base this on the brief and audience context:
Every theme should provide at minimum:
section.lead) — for title and closing slidessection.invert or section.light) — the opposite brightness for emphasissection.divider) — section breaksOptionally, if the brief suggests it, add one or two custom classes that fit the theme's character (e.g. section.dramatic for a noir theme, section.whisper for a quiet theme).
If the code block background is dark (which it usually should be), you need custom --color-prettylights-syntax-* variable overrides. Design these to match the theme's palette:
See references/marp-theme-anatomy.md for the full list of variables.
Follow this structure exactly. Read references/marp-theme-anatomy.md for the technical details on why each section is needed.
/* @theme theme-name */
@import 'default';
@import url('https://fonts.googleapis.com/css2?family=...');
:root {
/* Theme palette */
/* ... colour variables ... */
/* Override default Marp theme variables */
--borderColor-default: transparent;
--bgColor-muted: transparent;
--bgColor-default: transparent;
/* Syntax highlighting */
--color-prettylights-syntax-comment: ...;
--color-prettylights-syntax-constant: ...;
--color-prettylights-syntax-entity: ...;
--color-prettylights-syntax-entity-tag: ...;
--color-prettylights-syntax-keyword: ...;
--color-prettylights-syntax-string: ...;
--color-prettylights-syntax-variable: ...;
--color-prettylights-syntax-brackethighlighter-angle: ...;
--color-prettylights-syntax-brackethighlighter-unmatched: ...;
--color-prettylights-syntax-carriage-return-bg: ...;
--color-prettylights-syntax-carriage-return-text: ...;
--color-prettylights-syntax-markup-heading: ...;
--color-prettylights-syntax-markup-bold: ...;
--color-prettylights-syntax-markup-italic: ...;
--color-prettylights-syntax-markup-list: ...;
--color-prettylights-syntax-storage-modifier-import: ...;
--color-prettylights-syntax-string-regexp: ...;
}
/* BASE SLIDE */
section { ... }
/* HEADINGS */
section h1 { ... }
section h2 { ... }
section h3 { ... }
/* BODY TEXT & LINKS */
section p { ... }
section a { ... }
section strong { ... }
/* LISTS */
section ul, section ol { ... }
section li { ... }
section li::marker { ... }
/* CODE */
section code { ... } /* inline code */
section pre { ... } /* code block container */
section pre code { ... } /* code block text */
/* BLOCKQUOTES */
section blockquote {
border: none !important; /* MUST include this */
...
}
/* TABLES */
section table { ... }
section table th { ... }
section table td { ... }
section table tr {
background-color: transparent !important; /* MUST include this */
}
/* HEADER & FOOTER */
header { position: absolute; top: 22px; left: 70px; right: 70px; ... }
footer { position: absolute; bottom: 22px; left: 70px; right: 70px; ... }
/* PAGINATION */