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

Custom color (CSS variables)

The default theme has followed GitHub style provided by github-markdown-css package, and the most of CSS variables are defined in the upstream. Please refer to the source code of that to inspect appliable variables.

<style>
  :root {
    --color-fg-default: #eff;
    --color-canvas-default: #246;
    /* ... */
  }
</style>

We also have a little of additional variables to set colors for Marp specifics.

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 scoped local 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 -->

ℹ️ You may use multiple classes, by YAML array or separated string by space.

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

# Lead + invert

---

<!-- class: lead gaia -->

# Lead + gaia

Custom color (CSS variables)

Color scheme for Gaia theme has defined by CSS variables. You also can use the custom color scheme by inline style.

<style>
  :root {
    --color-background: #fff;
    --color-foreground: #333;
    --color-highlight: #f96;
    --color-dimmed: #888;
  }
</style>

Uncover

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

<!-- theme: uncover -->

Custom color (CSS variables)

Color scheme for Uncover theme has defined by CSS variables. You also can use the custom color scheme by inline style.

<style>
  :root {
    --color-background: #ddd;
    --color-background-code: #ccc;
    --color-background-paginate: rgba(128, 128, 128, 0.05);
    --color-foreground: #345;
    --color-highlight: #99c;
    --color-highlight-hover: #aaf;
    --color-highlight-heading: #99c;
    --color-header: #bbb;
    --color-header-shadow: transparent;
  }
</style>

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 KaTeX math block. Please note that MathJax math block always will apply auto scaling down.
• 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';