Themes

Themes control the visual appearance of your presentation, including typography, colors, animations, and transitions. Tap comes with eight built-in themes designed for different presentation styles, ranging from clean professional looks to bold artistic expressions.

Setting a Theme

Set the theme in your presentation's frontmatter:

---
theme: paper
---

The theme applies to all slides in your presentation.

Built-in Themes

Paper

Ultra-clean and premium, like a fresh sheet of premium paper where content takes center stage.

---
theme: paper
---

Best for: Professional presentations, corporate settings, content-heavy slides where readability is paramount.

Characteristics:

• Pure white background with near-black text
• Inter/system-ui typography with confident letter-spacing
• Warm accent colors (#78716c)
• Dark code blocks (#1e1e1e) with excellent contrast
• Smooth 400ms ease-out transitions

Noir

Cinematic and sophisticated, drawing from film noir elegance with deep blacks and gold accents.

---
theme: noir
---

Best for: Executive briefings, client pitches, investor meetings, premium product presentations.

Characteristics:

• Deep charcoal backgrounds (#0a0a0a)
• Crisp white text (#fafafa)
• Sophisticated gold accent (#d4af37)
• Playfair Display for headings, Inter for body
• Vignette overlay and multi-layer shadows

Aurora

Vibrant and dynamic like the northern lights, with animated gradient mesh and glassmorphism effects.

---
theme: aurora
---

Best for: Startup pitches, creative presentations, product launches, conference talks.

Characteristics:

• Animated gradient backgrounds (purple to blue to teal)
• Glassmorphism with backdrop-blur-xl
• Space Grotesk typography
• Semi-transparent dark glass code blocks with cyan glow
• Mesmerizing 20s gradient mesh animation

Phosphor

Authentic CRT monitor aesthetic with glowing phosphor green text, scanlines, and retro-futuristic hacker vibes.

---
theme: phosphor
---

Best for: Developer conferences, security talks, technical deep-dives, hacking demos.

Characteristics:

• True black (#000) background
• Phosphor green (#00ff00) primary color
• Multi-layer text shadows for glow effect
• Scanline overlay via repeating-linear-gradient
• JetBrains Mono throughout
• Screen curve vignette

Poster

Bold graphic design with giant typography, thick borders, and high contrast that's impossible to ignore.

---
theme: poster
---

Best for: Design talks, making statements, standing out, architectural presentations.

Characteristics:

• Stark black (#000) and white (#fff)
• Electric red accent (#ef4444)
• Anton font for ALL CAPS headings
• Thick 4px borders with 8px 8px 0 drop shadows
• No rounded corners - everything sharp
• Inverted code blocks (white on black)

Ink

Japanese calligraphy-inspired zen minimalism with brush stroke aesthetics and washi paper texture.

---
theme: ink
---

Best for: Zen presentations, mindfulness talks, Japanese culture topics, minimalist design showcases.

Characteristics:

• Cream/off-white background (#f5f1e8) with sumi black text (#1a1a1a)
• Vermillion red accent (#c41e3a) for emphasis
• Noto Serif JP typography for elegant serif styling
• Subtle washi paper texture via CSS gradients
• Brush stroke decorative elements for blockquotes and dividers
• Hanko seal accent on title slides

Bauhaus

Geometric modernism with bold primary colors and constructivist design principles.

---
theme: bauhaus
---

Best for: Design school presentations, modernism discussions, architecture talks, bold statements.

Characteristics:

• Stark white background (#ffffff) with black text (#000000)
• Primary colors only: red (#e53935), yellow (#fdd835), blue (#1e88e5)
• Bebas Neue geometric sans-serif typography
• Bold geometric shapes as decorative elements
• Thick black borders with sharp corners
• Asymmetric grid-based layouts

Editorial

Classic magazine publishing design with elegant typography and sophisticated layout.

---
theme: editorial
---

Best for: Publishing talks, journalism presentations, content strategy, brand storytelling.

Characteristics:

• Crisp white background (#ffffff) with true black text (#000000)
• Single spot color: deep burgundy (#7f1d1d)
• Playfair Display for headlines, Source Serif Pro for body
• Drop cap styling for first paragraphs
• Fine hairline rules (1px borders)
• Large quotation marks for pull quotes

What Themes Control

Each theme defines:

Aspect	Description
Typography	Font families, sizes, weights, and line heights for headings, body text, and code
Colors	Background colors, text colors, accent colors, and syntax highlighting palette
Animations	How elements appear on slides (fade, slide, bounce, etc.)
Transitions	How slides transition between each other (fade, push, slide, zoom)
Spacing	Padding, margins, and overall layout density
Code styling	Code block appearance, syntax highlighting colors, and font sizing

Theme Reference Table

Theme	Vibe	Background	Typography
paper	Ultra-clean, premium	Light (#ffffff)	Inter/system-ui
noir	Cinematic, sophisticated	Dark (#0a0a0a)	Playfair Display + Inter
aurora	Vibrant, dynamic	Animated gradient	Space Grotesk
phosphor	CRT, hacker aesthetic	Black (#000)	JetBrains Mono
poster	Bold, graphic	High contrast	Anton + system sans
ink	Zen, calligraphy	Cream (#f5f1e8)	Noto Serif JP
bauhaus	Geometric modernism	White (#ffffff)	Bebas Neue
editorial	Magazine publishing	White (#ffffff)	Playfair Display + Source Serif Pro

Customizing Themes

Color Overrides

Override theme colors using themeColors in frontmatter:

---
theme: paper
themeColors:
  accent: "#ff0000"
  background: "#f5f5f5"
---

Available color keys: background, text, muted, accent, codeBg

Custom Theme CSS

For complete customization, create your own theme CSS file:

---
customTheme: "./my-theme.css"
---

Your CSS file should define these CSS custom properties:

.theme-custom {
  --color-bg: #ffffff;
  --color-text: #0a0a0a;
  --color-muted: #71717a;
  --color-accent: #3b82f6;
  --color-code-bg: #1e1e1e;
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}