lecture.studio

Marp themes for lectures: built-in, custom CSS, house style

By Ekrem Çetinkaya · Published

Marp ships three themes, default, gaia and uncover, and any of them can be adjusted with a style: block in the front matter or replaced with a CSS file that starts with /* @theme name */. For lectures, start from default, left-align, shrink the base font and add two or three classes for dividers and columns; that is a theme you can keep for years.

This guide is about the theme, not the slide content. It covers what the built-in themes look like, the three ways to change one, what a lecture theme actually needs, and how to make the theme travel with the deck so it renders the same on every machine.

Which built-in Marp theme is best for teaching?

For a course, default with adjustments wins because lectures have tables, code and two-column layouts, and default leaves the most room for them.

Three ways to change a theme

1. A style block in the front matter

The quickest change, and it stays inside the deck file:

---
marp: true
theme: default
paginate: true
style: |
  section { font-size: 20px; text-align: left; justify-content: flex-start; }
  h1 { font-size: 36px; }
---

Use this when the change is for one deck. If you paste the same block into every deck of a course, it is time for a theme file.

2. A scoped style on one slide

<style scoped>
section { font-size: 16px; }
</style>

For the one slide that has a long table. Nothing else is affected.

3. A theme file

A CSS file whose first line names the theme:

/* @theme cs101 */
@import 'default';

section { font-size: 20px; padding: 32px; text-align: left; justify-content: flex-start; }
section h1 { font-size: 36px; margin-top: 0; }
section table { font-size: 18px; }
section.divider { justify-content: center; }
section.divider h1 { font-size: 64px; text-align: center; }
.columns { display: flex; gap: 24px; }
.column { flex: 1; min-width: 0; }

Then theme: cs101 in the front matter, and <!-- _class: divider --> on a section slide. @import 'default' keeps everything you did not override, so the file stays short.

What does a lecture theme need?

From several terms of decks, the list that keeps coming back:

  1. Left alignment and top justification. Bullets that float in the middle of the slide waste the top third.
  2. A smaller base font than the built-ins, around 20px at 1280×720, because a lecture slide carries more than a keynote slide.
  3. A divider class for section titles, centred and large, so the deck has visible chapters.
  4. Columns: a flex container and a column class, for comparing two things side by side.
  5. A callout or box class for definitions and warnings.
  6. Table and code sizes set once, because the defaults are too large for real data.
  7. Header and footer from the front matter (header:, footer:), with the course code on every slide so a screenshot is attributable; the directives and the CSS that moves them are in Marp header, footer and page numbers, and the sizes in Marp font size.

Colours are the last thing to choose, and the least important. The classes above are what make forty slides a week bearable to write.

Making the theme travel with the deck

A theme file is only useful if every renderer finds it:

If the deck must render with no theme file at all (a student opening it in a random Marp tool), the style: block in the front matter is the portable choice, at the cost of repeating it.

The two themes Lecture Studio ships

Lecture Studio ships two theme files, both @import 'default'. ytu-lecture is the list above: left-aligned, 20px base, divider and lead classes, columns/column and columns-3 layouts, highlight and box for emphasis, and table and code sizes set for dense slides. ytu-talk is the variant for seminars and workshops: 22px base, a coloured h1 driven by an --accent custom property a deck can override in one line, coloured boxes, a .source footer and a .timer badge. The preview in the app renders them, and a deck that names theme: ytu-lecture in its front matter uses it. To render the same deck outside the app, pass the files from the themes/ folder of the source repository to marp-cli with --theme-set. The app needs macOS 15 or later and an Oberik project key; PDF and PPTX come from marp-cli, not from the app.

FAQ

How do I make a custom Marp theme?

Write a CSS file that starts with /* @theme yourname */, optionally @import 'default', then override section, headings, tables and add your classes. Name it in the deck with theme: yourname and give the file to your renderer (--theme-set in marp-cli, markdown.marp.themes in VS Code).

Can I change the theme for one slide only?

Yes. Use a <style scoped> block on that slide, or a per-slide class with <!-- _class: name --> that your theme styles.

Which Marp theme is best for academic slides?

default with a smaller font, left alignment and a divider class. gaia and uncover are designed for talks and keynotes.

Do Marp themes work when exporting to PowerPoint?

Yes: the PPTX export renders each slide as an image with the theme applied. The editable PPTX mode approximates the layout with native shapes and loses some styling.

More guides