We provide some nice built-in themes in Marp Core. You can choose a favorite theme by using Marpit theme
directive in your Markdown.
These can use in the all of built-in themes.
We have 4:3
slide size preset (960x720
) for a traditional presentation.
<!-- size: 4:3 -->
By using invert
class, you can change to use the inverted color scheme.
<!-- class: invert -->
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 -->
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 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 -->
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 -->
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
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 theme has three design concepts: simple, minimal, and modern. It's inspired from many slide deck frameworks, especially reveal.js.
<!-- theme: uncover -->
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>
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.
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
*/
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';