Marp colours: text, background, invert and dark themes
Change Marp colours with two directives: color: for the text and backgroundColor: for the slide, in the front matter for the whole deck or as <!-- _color: white --> and <!-- _backgroundColor: #1d4ed8 --> on one slide. The gaia and uncover themes add <!-- _class: invert --> for a dark slide, and a dark deck is a theme whose section sets a dark background and light text. All of it tested on Marp Core 4.4.
This guide covers the directives, a coloured section slide, text over a photo, the invert class, a dark theme, and the projector problem that decides whether dark is a good idea at all.
The directives
---
marp: true
color: #1f2328
backgroundColor: #ffffff
---
Deck-wide. On a slide, the underscore form applies once:
<!-- _color: white -->
<!-- _backgroundColor: #1d4ed8 -->
# Section 2: Scheduling
That is a coloured section divider with no theme work. Without the underscore, the directive changes every slide from there to the end, which is occasionally useful for a second half in a different colour and usually a mistake.
Related directives: backgroundImage, backgroundPosition, backgroundRepeat, backgroundSize for a CSS background (as opposed to the ![bg] image syntax).
Text over a photo
A full-bleed photo with white text is readable only if the photo is darkened:
<!-- _color: white -->
# Welcome to CS101
The brightness filter on the background image does the darkening; blur:4px helps too. Marp's image filters are in Marp images.
The invert class
In gaia and uncover, <!-- _class: invert --> swaps to the theme's dark variant for one slide, a quick section divider. default has no invert; add one to your theme:
section.invert { color: #f5f5f5; background-color: #151515; }
section.invert h1, section.invert a { color: #93c5fd; }
section.invert header, section.invert footer, section.invert::after { color: #a3a3a3; }
A dark theme
A dark deck is a theme, not fifty directives:
/* @theme cs101-dark */
@import 'default';
section { color: #f5f5f5; background-color: #151515; }
section h1 { color: #93c5fd; }
section a { color: #93c5fd; }
section strong { color: #fde68a; }
section code { background: #262626; color: #f5f5f5; }
section pre { background: #1e1e1e; }
section table th { background: #262626; }
header, footer, section::after { color: #a3a3a3; }
Code blocks, tables and inline code have their own backgrounds in the base theme and must be restyled, or they show as light boxes on the dark slide. The theme builder has a dark preset that does this.
The projector problem
Dark themes look good on a laptop and poor on most lecture-room projectors: the blacks come out grey, low-contrast text disappears, and a bright room makes it worse. Light background with dark text is the safe default for teaching; use dark slides for section dividers and for rooms you have tested. If the deck must be dark, keep the text at full white on near-black, raise the base font size a step, and avoid mid-grey for anything students must read.
Accessibility
Whatever the palette, check contrast: 4.5:1 for body text, 3:1 for large headings, and never colour alone to carry meaning (the highlighted row also needs a mark). The blue used for links above passes on white and on near-black; pastel accents often do not.
FAQ
How do I change the background colour of a Marp slide?
<!-- _backgroundColor: #1d4ed8 --> on the slide, or backgroundColor: in the front matter for the whole deck.
How do I change the text colour in Marp?
<!-- _color: white --> on a slide or color: in the front matter. For one word, inline HTML with a class styled in the theme (inline style="" attributes are stripped by default).
Does Marp have a dark theme?
gaia and uncover have an invert class for dark slides. A fully dark deck is a custom theme; the theme builder's dark preset generates one.
Why do my dark slides look washed out on the projector?
Projectors and bright rooms lift blacks to grey. Prefer a light theme for teaching, or use full-white text on near-black with larger type.