manus-skills/.kortix/opencode/skills/design/marp-slide/references/official-themes.md

Marp Official Themes Reference

Explanation of the 3 official themes included in Marp Core.

Official implementation: https://github.com/marp-team/marp-core/tree/main/themes

Official Theme List

1. default - Simple and versatile theme
2. gaia - Modern and colorful theme
3. uncover - Minimal and elegant theme

Default Theme

Features

• Colors: White background, black text, blue accent
• Font: Simple sans-serif
• Use for: General presentations
• Style: Clean, readable

Usage

---
marp: true
theme: default
---

# Title

Content

Available Classes

lead (Title Slide)

<!-- _class: lead -->

# Presentation

Subtitle or description

Centered, large text.

invert (Inverted Colors)

<!-- _class: invert -->

# Black Background · White Text

Background becomes black, text becomes white.

Combined

<!-- _class: lead invert -->

# Inverted Title Slide

Multiple classes can be applied simultaneously.

Customization Example

---
theme: default
---

<style>
section {
  background-color: #f5f5f5;
}

h1 {
  color: #1e40af;
}
</style>

Gaia Theme

Features

• Colors: Colorful, vibrant accent colors
• Font: Modern sans-serif
• Use for: Creative presentations, design showcases
• Style: Energetic, visually appealing

Usage

---
marp: true
theme: gaia
---

# Title

Color Variations

The Gaia theme has multiple color schemes:

<!-- _class: lead -->
# Default Colors

---

<!-- _class: lead invert -->
# Inverted Colors

---

<!-- _class: lead gaia -->
# Gaia Colors

Distinctive Styles

• Gradient backgrounds: Used in title slides
• Colorful accents: Headings and links
• Large typography: Impactful headings

Customization Example

---
theme: gaia
---

<style>
section {
  --color-background: #fff;
  --color-foreground: #333;
  --color-highlight: #e91e63;
}
</style>

Uncover Theme

Features

• Colors: Minimal, white or black base
• Font: Elegant serif font
• Use for: Formal presentations, academic talks
• Style: Refined, simple, elegant

Usage

---
marp: true
theme: uncover
---

# Title

Available Classes

lead (Title Slide)

<!-- _class: lead -->

# Presentation

Centered, large serif font.

invert (Inverted Colors)

<!-- _class: invert -->

# Black Background Slide

Black background, white text.

Distinctive Styles

• Serif font: Used for headings
• Wide margins: Minimal layout
• Center alignment: Content tends to be centered

Customization Example

---
theme: uncover
---

<style>
section {
  font-family: 'Georgia', serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
</style>

Theme Comparison Table

Feature	default	gaia	uncover
Background	White	Colorful	White/Black
Font	Sans-serif	Sans-serif	Serif
Colors	Simple	Vibrant	Minimal
Use Case	General	Creative	Formal
Style	Clean	Energetic	Elegant

Common Class Specifications

Available in all official themes:

lead

<!-- _class: lead -->

• For title slides
• Centered
• Large text
• Hides footer/page numbers

invert

<!-- _class: invert -->

• Inverts colors
• Swaps background and text colors
• Dark mode style

Theme Selection Guidelines

When to Choose default

• General presentations
• Business use
• Need simple, readable design
• As a base for customization

When to Choose gaia

• Creative presentations
• Design-related talks
• Youth-oriented audiences
• Need visual impact

When to Choose uncover

• Formal presentations
• Academic talks
• Minimal design preference
• Want elegant impression

Combining with Custom Themes

Extending Official Themes

/* @theme my-custom-default */

@import-theme 'default';

section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

h1 {
  color: #1e3a8a;
}

Switching Between Multiple Themes

---
marp: true
theme: default
---

# Section 1 (default theme)

---

<!-- theme: gaia -->

# Section 2 (gaia theme)

---

<!-- theme: uncover -->

# Section 3 (uncover theme)

Note: Theme switching within the same file has limited support.

Practical Examples

Using default Theme

---
marp: true
theme: default
paginate: true
---

<!-- _class: lead -->

# Project Report

October 2024

---

## Agenda

1. Progress Status
2. Challenges and Solutions
3. Future Plans

---

## Progress Status

- Task A: Completed
- Task B: In Progress
- Task C: On Schedule

Using gaia Theme

---
marp: true
theme: gaia
---

<!-- _class: lead -->

# New Product Launch

Innovative Design

---

## Concept

**Three Pillars**

1. 🎨 Beauty
2. 🚀 Speed
3. 💡 Usability

Using uncover Theme

---
marp: true
theme: uncover
---

<!-- _class: lead -->

# Research Presentation

Deep Learning Applications

---

## Research Background

Recent technological advances...

---

<!-- _class: invert -->

## Experimental Results

Accuracy: 95.3%

Official References

• Official Theme Implementation: https://github.com/marp-team/marp-core/tree/main/themes
• Marp Core README: https://github.com/marp-team/marp-core
• Theme CSS Specification: https://marpit.marp.app/theme-css