Themes and Styling Reference

Built-in Themes

Set in frontmatter:

---
theme:
  name: catppuccin-mocha
---

Available themes:

• catppuccin-latte, catppuccin-frappe, catppuccin-macchiato, catppuccin-mocha
• dark, light
• gruvbox-dark
• terminal-dark, terminal-light (inherit terminal colors)
• tokyonight-storm, tokyonight-moon, tokyonight-day, tokyonight-night

Choosing a theme: catppuccin-mocha and dark are safe defaults for dark terminals. Use terminal-dark if you want the presentation to inherit your terminal's colors (including transparent backgrounds). Use light or catppuccin-latte for light terminal backgrounds.

Theme Overrides in Frontmatter

---
theme:
  override:
    default:
      colors:
        foreground: "e6e6e6"
        background: "040312"
      margin:
        percent: 8
    slide_title:
      padding_bottom: 1
      padding_top: 1
      separator: true
    headings:
      h1:
        bold: true
      h2:
        italic: true
    code:
      theme_name: base16-eighties.dark
      padding:
        horizontal: 2
        vertical: 1
    footer:
      style: progress_bar
---

Font Size

presenterm supports font sizes in kitty terminal (v0.40.0+). Set via theme for slide titles/headings, or per-slide via command:

<!-- font_size: 2 -->

Range: 1 (default) to 7. All built-in themes set slide titles and headings to font_size 2.

Footer Configuration

---
theme:
  override:
    footer:
      style: template
      left: "My Company"
      center: "_Confidential_"
      right: "{current_slide} / {total_slides}"
      height: 3
---

Footer styles: template (custom left/center/right), progress_bar, empty (no footer). Footer images are supported — use left: image: logo.png.

Color Palette

Define reusable colors in your theme override:

---
theme:
  override:
    palette:
      classes:
        accent:
          foreground: "E8488B"
        success:
          foreground: "4ECDC4"
        warning:
          foreground: "F7B801"
---

Then use in slides: <span class="accent">highlighted term</span>. Or reference in styles: <span style="color: palette:accent">text</span>.

Coordinating Diagram Themes with Slide Themes

Match your diagram colors to your slide theme for visual coherence:

• For mermaid on dark themes: use %%{init: {'theme': 'dark'}}%%
• For D2 on dark themes: set style.fill backgrounds to dark values and style.font-color to light values
• For D2, use --theme CLI flag or in-file variables to control palette
• Keep fonts consistent — monospace in both code blocks and diagrams creates the most natural terminal aesthetic

Colored Text

Use <span> tags with inline styles:

<span style="color: #ff0000">Red text</span>
<span style="color: #00ff00; background-color: #000000">Green on black</span>

Colors can reference theme palette:

<span style="color: palette:red">themed red</span>
<span class="my_class">class-based coloring</span>

Only <span> tags are supported — no <div>, <p>, etc.