Marp Theme Creator

Key i-impeccable principles to apply:

• Font selection: Follow the reflex rejection procedure. Don't reach for Inter, DM Sans, Playfair Display, etc. Find something that fits the brief as a physical object.
• Colour: Use OKLCH thinking. Tint neutrals toward the brand hue. Reduce chroma at extreme lightness. Dominant + sharp accent > timid even distribution.
• No AI tells: No left-border accent stripes. No gradient text. No glassmorphism. No identical card grids. No purple-to-blue gradients on dark backgrounds.
• Theme choice: Light vs dark should be derived from context, not defaulted.

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).

Step 1: Understand the brief

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.

What to ask (all at once, skip what's obvious)

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?

What NOT to ask

Don't ask about CSS, Marp directives, font names, or technical details. That's your job.

Step 2: Design the theme

Work through these decisions before writing any CSS.

2a: Name the theme

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.

2b: Choose the palette

Pick 3–5 colours that embody the brief:

1. Background — the slide surface. Sets the entire mood.
2. Foreground — body text colour. Must have strong contrast against background.
3. Heading colour — can be the same as foreground or a distinctive accent.
4. Accent — for links, list markers, inline code, highlights. Used sparingly.
5. Muted — for secondary text, footers, pagination. Recedes but stays readable.

Also choose:

• Code block background — almost always dark regardless of slide background, since syntax highlighting reads best on dark surfaces.
• Code text colour — the base colour for unhighlighted code text.

If i-impeccable is available: tint your neutrals toward the dominant hue. Use OKLCH thinking — reduce chroma at extreme lightness values.

2c: Choose the fonts

Pick TWO fonts from Google Fonts:

1. Display font — for headings. Should have personality that matches the brief.
2. Body font — for everything else. Must be highly readable at 20-28px.

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.

2d: Choose light or dark

Base this on the brief and audience context:

• Night-time, moody, technical, cinematic → dark
• Daytime, cheerful, educational, formal → light
• If the brief is ambiguous, go with your gut — just make a deliberate choice

2e: Plan the slide variants

Every theme should provide at minimum:

• Base slide — the default look
• Lead slide (section.lead) — for title and closing slides
• Inverted slide (section.invert or section.light) — the opposite brightness for emphasis
• Divider slide (section.divider) — section breaks

Optionally, 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).

2f: Plan the syntax highlighting

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:

• Keywords and control flow → use the accent colour or a warm/cool variant
• Strings → a complementary colour that reads well on the code background
• Comments → muted, clearly secondary, but still readable
• Functions/entities → a distinguishable third colour
• Variables/constants → a fourth colour if you can manage it without clashing

See references/marp-theme-anatomy.md for the full list of variables.

Step 3: Write the CSS

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 */