chiaroscuro

A Marp theme in light and shadow.

A 1920 × 1080 deck built around one idea: the talk runs in the light, and the black slides — a question, a doubt, anything marked dark — are the shadows in between. Editorial style, one red accent — and four more colours put aside for your own diagrams — Montserrat throughout, fourteen layouts that cover a whole talk without ever asking you to write CSS.

themes/chiaroscuro.css   the theme — one file, no dependencies
example.md               one slide per layout, ready to render
assets/placeholder.jpg   the filler photo the example uses

Fourteen layouts

One class directive per slide — <!-- _class: name --> — and nothing else to write. Left to right — cover is the photograph at the top of this page; each is described in the documentation.

_{agenda — a numbered list against grey numerals · poster — one large sentence, centred · question — a white band, and a giant "?" in the black}

_{(none) — the everyday slide · indent — the body hung off the title · half — text left, photo right}

_{side — half, dropped to the middle · duo — two photos, a rule and a caption each · trio — three in a row, or two to six}

_{board — one free field across the top · board — a photograph becomes a full-bleed band · image — one photo covering the slide}

_{split — half black, half white · comparison — columns hanging from a line · poster dark — and black, to close}

Modifiers

Space-separated in the same directive — <!-- _class: half dark -->. dark turns any layout black; mirror moves the title to the other side; columns-N counts whatever the layout counts. The rest — centered, no-rule, justify, the type helpers — are in the documentation.

_{dark — any layout, turned black · columns-2 — text columns on the everyday slide · comparison columns-4 mirror}

_{![bg left] — the photo implies the side · <div class="right"> — the free field takes code · .symbol .pale — the subject as the illustration}

Install

Copy themes/chiaroscuro.css into your project and register it with the tool you use:

• marp-cli — a .marprc.yml next to where you run it:

  themeSet: ./themes
  allowLocalFiles: true
  html: true

  or point at the file directly: marp deck.md --theme themes/chiaroscuro.css.

• Marp for VS Code — in .vscode/settings.json:

  {
    "markdown.marp.themes": ["./themes/chiaroscuro.css"],
    "markdown.marp.html": "all"
  }

html is what lets an inline <svg> or a style attribute past Marp's allowlist — without it a figure renders as its own source code across the slide, and a style is dropped with no warning at all.

If a render comes out in Segoe UI with blue headings on a small canvas, the theme silently failed to register — the documentation walks through each channel and its quirks.

Quick start

---
marp: true
theme: chiaroscuro
paginate: true
---

<!-- _class: cover -->
<!-- _paginate: false -->

![bg opacity:.4 saturate:0](photo.jpg)

# Title

Subtitle
Author

---

# An ordinary slide

The title starts at the left margin with its red rule bleeding off the edge,
and the body runs under it, margin to margin.

Or render the example deck — one slide per layout — from the repository root:

marp example.md --pdf -o example.pdf

What else it does

• Five accent colours for your own content. A ramp from the theme's red to a blue, every step at least 3.7 : 1 against white and against black, and no rule in the theme reads any of them — replace all five and nothing moves.

  

• SVG diagrams adapt to the ground. Draw a figure once, in the light palette; on the black layouts the theme inverts it and turns the hues back around, so one file serves both grounds.

• Six line weights for your own diagrams. A --sw-* scale beside the type and colour ones, read straight from a shape — stroke-width="var(--sw-medium)" — so a drawing is set on the theme's steps rather than on numbers invented beside it. As with the accents, no rule in the theme reads them.

  

• Montserrat is embedded in the CSS. Composing and exporting need neither an internet connection nor installed fonts; the HTML and PDF you export are self-contained.

• A fixed 1920 × 1080 px geometry. Every decision — palette, type scale, spacing, weights — is a variable in the first two hundred lines of the file, made to be forked.

Documentation

Everything above, in full — how to write each layout, the modifiers, the type helpers, the accent series and its contracts, photograph credits, exporting — is in DOCS.md.

Licence

The theme is MIT licensed. Montserrat is under the SIL Open Font License 1.1. assets/placeholder.jpg is filler for the example deck only — replace it with your own before you publish anything.