---
title: Theme Gallery
---

[@styles]: ./theme-gallery.css

# Theme gallery

PathMX ships four built-in themes. A Source selects one with `theme: <id>` in
frontmatter, any URL can override it with `?theme=<id>`, and the Player's
Theme select switches it while a deck is open.

## Reading

The same lesson through each preset, following your light or dark setting:

<div class="theme-previews">
  <figure class="theme-preview">
    <x-source-embed src="./themes/paper.md?layout=false" />
    <figcaption><a href="./themes/paper.md">Paper</a> — Literata throughout, ink-blue links, hairline rules and generous reading space.</figcaption>
  </figure>
  <figure class="theme-preview">
    <x-source-embed src="./themes/studio.md?layout=false" />
    <figcaption><a href="./themes/studio.md">Studio</a> — Instrument Sans, a cobalt accent and quiet surfaces.</figcaption>
  </figure>
  <figure class="theme-preview">
    <x-source-embed src="./themes/terminal.md?layout=false" />
    <figcaption><a href="./themes/terminal.md">Terminal</a> — dark-locked Geist Mono headings, amber on near-black, square corners. Set <code>theme: { preset: terminal, hue: 145 }</code> to retint.</figcaption>
  </figure>
  <figure class="theme-preview">
    <x-source-embed src="./themes/synthwave.md?layout=false" />
    <figcaption><a href="./themes/synthwave.md">Synthwave</a> — the PathMX brand: warm paper or midnight blue, violet and cyan, Bricolage Grotesque headings.</figcaption>
  </figure>
</div>

## Custom themes

These two pages use a theme stylesheet instead of a preset. Copy one as a
starting point; see [Theme a site](../docs/site/theme-a-site.guide.md).

<div class="theme-previews">
  <figure class="theme-preview">
    <x-source-embed src="./themes/glass.md?layout=false" />
    <figcaption><a href="./themes/glass.md">Glass</a> — cool neutrals, a softly raised reading surface and rounded details, in <a href="./themes/glass.theme.css"><code>glass.theme.css</code></a>.</figcaption>
  </figure>
  <figure class="theme-preview">
    <x-source-embed src="./themes/bauhaus.md?layout=false" />
    <figcaption><a href="./themes/bauhaus.md">Bauhaus</a> — geometric type, primary colors as structure and crisp edges, in <a href="./themes/bauhaus.theme.css"><code>bauhaus.theme.css</code></a>.</figcaption>
  </figure>
</div>

## Slides

The same presentation through each preset, so scale, layouts,
tables, code, and media are reviewed on identical content:

- [Default](./play-deck.demo.md?play=presentation&theme=default) —
  the plain foundation at presentation scale.
- [Paper](./play-deck.demo.md?play=presentation&theme=paper)
- [Studio](./play-deck.demo.md?play=presentation&theme=studio) — the
  deck's Source default.
- [Terminal](./play-deck.demo.md?play=presentation&theme=terminal)
- [Synthwave](./play-deck.demo.md?play=presentation&theme=synthwave)