Marp-CLI: How to use a custom theme that imports the default theme

Question

I am using marp-cli to create lecture slides. In order to fine tune the slide content, I have created a custom-css that extends some style rules implemented in the marp default css template.

My objective: I want to externalize the css rules in acustom-theme.css file and remove them from the .md-document in which the slide's content resides.

The problem: When calling the custom-theme.css using marp-cli with the --theme-set option, I can not specify that my css "extends" the style rules of the default template.

The question: How can I specify that my custom-theme.css is defined on the basis of the marp default template?

Thanks in advance for the support.

Answer 1

In case other users experience the same issue, the solution to the problem is stated here in form of an example – provided by Yuki Hattori (the main developer of the marp toolset):

Marp: Markdown.md

---
theme: custom-theme
---

# Hello, world!

/* custom-theme.css */
/* @theme custom-theme */

@import 'default';

section {
  /* Override default background */
  background: #def;
}

Marp-cli:

marp --engine ./engine.js --bespoke.progress --watch --theme-set custom-theme.css -- mymarkdo

see also: https://github.com/marp-team/marp-cli/issues/266

Answer 2

There is an on-the-fly theme rendering in VS Code without the need of the CLI.

1. install the marp-team.marp-vscode extension
2. paste the below snippet into .vscode/settings.json
3. change your *.css paths and styles accordingly

---

// Please put `.vscode/settings.json` on your workspace
{
  "markdown.marp.themes": [
    "https://example.com/foo/bar/custom-theme.css",
    "./themes/your-theme.css"
  ]
}