Backgrounds and themes

Slide theme

<!-- @slide-theme stone blue gray -->

The three values are BASE ACCENT FRAME:

Value	Controls
BASE	Background, surface, and text palette
ACCENT	Highlight color
FRAME	Frame and divider color

Colors are named colors such as slate, stone, blue, amber, and zinc. A theme affects the whole slide.

Backgrounds

A slide or a panel can combine a wallpaper image, a color, and a gradient. Only the first directive of each kind takes effect.

Level	Wallpaper	Color	Gradient
Slide	@slide-wallpaper	@slide-bg	@slide-gradient
Panel	@wallpaper	@bg	@gradient

<!-- @slide-wallpaper -->
![Background](./images/background.jpg)

<!-- @slide-bg slate-900/70 -->
<!-- @slide-gradient down transparent -> slate-900/70 60% -> slate-950 -->

# Content above the background

• A wallpaper directive consumes the Markdown image that follows it; blank lines in between are fine.
• @bg takes a named color with an optional shade -50…-950 and opacity /0…/100, for example black/50.
• @gradient takes a direction (down, up, left, right) and ->-separated stops. A stop may carry a position, such as blue/60 45%.

Panel backgrounds work the same way but belong at the top of the panel:

<!-- @wallpaper -->
![Detail](./images/detail.jpg)

<!-- @bg black/55 -->
<!-- @gradient up black/80 -> transparent -->

# Panel content

Background sound

A slide can play the audio of a YouTube video. The directive must be followed by a Markdown link:

<!-- @sound autoplay on muted on volume 5 -->
[Soundtrack](https://www.youtube.com/watch?v=VIDEO_ID)

Option	Values	Default
autoplay	on, off	off
muted	on, off	off
volume	1–10	7