themes

Marp Core built-in themes

We provide some nice built-in themes in Marp Core. You can choose a favorite theme by using Marpit theme directive in your Markdown.

Common feature

These can use in the all of built-in themes.

4:3 slide

We have 4:3 slide size preset (960x720) for a traditional presentation.

<!-- size: 4:3 -->

invert class

By using invert class, you can change to use the inverted color scheme.

<!-- class: invert -->

---

Default

The default theme of Marp. It is based on GitHub markdown style, but optimized to the slide deck. Slide contents will be always vertically centered.

<!-- theme: default -->

Gaia

Gaia theme is based on the classic design of yhatt/marp.

Originally, this theme was created for a maintainer to use, and it's inspired from azusa-colors keynote template.

<!-- theme: gaia -->

Features

lead class

Contents of the slide will align to left-top by Gaia's default. But you can use lead class to be centering like uncover theme. It is useful for the leading page like a title slide.

<!--
theme: gaia
class: lead
-->

ℹ️ Marpit's Spot directive would be useful to apply lead class only into a current page.

<!-- _class: lead -->

Color scheme

Gaia theme supports an additional color scheme by gaia class.

<!-- class: gaia -->

ℹ️ Of course you may use multiple classes, by array or separated string by space.

---
theme: gaia
class:
  - lead
  - invert
---

# Lead + invert

---

<!-- class: lead gaia -->

# Lead + gaia

Uncover

Uncover theme has three design concepts: simple, minimal, and modern. It's inspired from many slide deck frameworks, especially reveal.js.

<!-- theme: uncover -->

⚠️ Restrictions

Auto-scaling for code block is disabled because uncover theme uses the elastic style that has not compatible with it.

Metadata for additional features

Marp Core's extended theming system will recognize the metadata to be able to enable extra features whose a side effect to the original DOM structure/the slide design through the manipulation.

In other words, the enabled feature requires taking care of the manipulated DOM and the view when styling.

If you never want to think complex styling, it's better to define no extra metadata. Your theme would work as same as a simple Marpit theme CSS if you do nothing.

@auto-scaling [flag(s)]

Enable auto-scaling features.

• true: Enable all features.
• fittingHeader: Enable fitting header.
• math: Enable scaling for math block.
• code: Enable scaling for code block.

Through separating by comma, it can select multiple keywords for individual features.

/**
 * @theme foobar
 * @auto-scaling fittingHeader,math
 */

@size [name] [width] [height]

Define size preset(s) for usable in size global directive.

/**
 * @theme foobar
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 * @size 4K 3840px 2160px
 */

section {
  /* A way to define default size is as same as Marpit theme CSS. */
  width: 960px;
  height: 720px;
}

User can choose a customized size of slide deck (section) from defined presets via size global directive.

---
theme: foobar
size: 4K
---

# Slide deck for 4K screen (3840x2160)

When the imported theme through @import "foo"; or @import-theme "bar"; has @size metadata(s), these presets still can use in an inherited theme.

Or you can use @size [name] false in the inherited theme if you need to disable specific preset.

/**
 * gaia-16-9 theme is based on Gaia theme, but 4:3 slide cannot use.
 *
 * @theme inherited-from-gaia
 * @size 4:3 false
 */

@import 'gaia';