Catppuccin for Marpit

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

To use this theme, you just need to reference one of the generated CSS files and declare the theme in your Markdown frontmatter.

1. Create a markdown file for your presentation (e.g., slide.md).
2. Add the appropriate Catppuccin flavor to your Marpit frontmatter:

---
theme: catppuccin-mocha
---

# Catppuccin Marp

Welcome to my soothing presentation!

---

<!-- _class: lead -->

## Centered Slide

This theme also ports the built-in Marp "lead" class for centered content!

Option A: Using Marp CLI

You can load the custom themes into the Marp CLI using command-line flags or a configuration file.

1. Command-Line flags

Make a single theme available:

# Point directly to a specific CSS file.
marp --theme-set themes/catppuccin-mocha.css -- slide.md

Make all flavors available:

# Point to the entire directory to load all 4 flavors, allowing you to easily switch between them in your Markdown frontmatter.
marp --theme-set themes -- slide.md

Note

Passing a theme via --theme-set does not automatically apply it.

It simply makes the theme available for Marp to consume if you've declared it in your Markdown's frontmatter (e.g., theme: catppuccin-mocha).

Force a theme (override frontmatter):

If you want to completely ignore the theme: declaration in your Markdown file and force a specific flavor, use the --theme flag instead.

marp --theme themes/catppuccin-mocha.css -- slide.md

2. Using a configuration file

If you prefer not to type flags every time, you can define your active themes in a Marp configuration file.

Here is an example .marprc (using YAML format) that registers the entire themes directory and sets Mocha as the default theme:

# .marprc
themeSet:
  - themes
# Optional: force this theme on all slides, overriding frontmatter
theme: catppuccin-mocha

Then, you can simply run Marp CLI pointing to your config:

marp --config-file marp.config.yml slide.md

Option B: Using Marp for VS Code

If you use the Marp for VS Code Extension, you can configure it to globally recognize the Catppuccin themes.

1. Download the themes/ folder to your workspace.
2. Open your VS Code settings.json (Workspace or Global).
3. Add the paths to the Catppuccin CSS files under markdown.marp.themes:

{
  "markdown.marp.themes": [
    "./themes/catppuccin-latte.css",
    "./themes/catppuccin-frappe.css",
    "./themes/catppuccin-macchiato.css",
    "./themes/catppuccin-mocha.css"
  ]
}

Now, typing theme: catppuccin-mocha in your markdown file will instantly apply the theme in the VS Code preview panel!

Theme features

CSS variables

Each flavor exports its palette through CSS variables, with the addition of opacity-based variables for each color, from 10 to 90%:

--red: #f38ba8;
--red-10: rgba(243, 139, 168, 0.10);
/* ... */
--red-90: rgba(243, 139, 168, 0.90);

lead class

Similarly to Marp's builtin Gaia theme, this theme provides the lead CSS class, which centers the contents of the slide when applied. It is useful for the leading page like a title slide.

<!--
theme: catppuccin-mocha
class: lead
-->

Tip

Marpit's scoped local directive would be useful to apply lead class only into a current page.

<!-- _class: lead -->

Development

This project uses Whiskers to dynamically generate the 4 Catppuccin flavors. To build locally:

1. Clone the repository: git clone https://github.com/nicolas-goudry/marp.git
2. Install Whiskers
3. Build the themes: whiskers marp.tera
4. The generated .css files will be placed in the themes/ directory.

💝 Thanks to

• Marp Team for the amazing presentation framework.
• Nicolas Goudry

 

Copyright © 2021-present Catppuccin Org