Color & Typography Themes

Slidev Theme Scholarly v2.0 introduces customizable color and typography themes to match your institution's branding or personal preferences.

Theme Gallery

Classic Blue (Default)

Oxford Burgundy

Cambridge Green

Yale Blue

Princeton Orange

Nordic Blue

Monochrome

Warm Sepia

High Contrast

Color Themes

Choose from 9 professionally designed color palettes:

Classic Academic Blue (Default)

The default theme inspired by traditional academic institutions.

---
theme: scholarly
# Classic Blue is the default, no additional configuration needed
---

Colors:

• Primary: #1e3a5f (Deep Academic Blue)
• Accent: #b8860b (Academic Gold)
• Background: #fdfbf7 (Warm Ivory)

Oxford Burgundy

Rich burgundy inspired by Oxford University.

---
theme: scholarly
themeConfig:
  colorTheme: oxford-burgundy
---

Colors:

• Primary: #862633 (Oxford Burgundy)
• Accent: #c5a572 (Antique Gold)
• Background: #faf8f5 (Off-white)

Cambridge Green

Classic green reminiscent of Cambridge University.

---
theme: scholarly
themeConfig:
  colorTheme: cambridge-green
---

Colors:

• Primary: #00543c (Cambridge Green)
• Accent: #d4af37 (Gold)

Yale Blue

Traditional Yale blue for a distinguished look.

---
theme: scholarly
themeConfig:
  colorTheme: yale-blue
---

Colors:

• Primary: #0f4d92 (Yale Blue)
• Accent: #d4af37 (Gold)

Princeton Orange

Vibrant orange for energetic presentations.

---
theme: scholarly
themeConfig:
  colorTheme: princeton-orange
---

Colors:

• Primary: #e87722 (Princeton Orange)
• Accent: #1c1c1c (Black)

Monochrome Professional

Clean, professional grayscale theme.

---
theme: scholarly
themeConfig:
  colorTheme: monochrome
---

Warm Sepia

Warm, vintage-inspired sepia tones.

---
theme: scholarly
themeConfig:
  colorTheme: warm-sepia
---

Nordic Blue

Cool, Scandinavian-inspired blue palette.

---
theme: scholarly
themeConfig:
  colorTheme: nordic-blue
---

High Contrast (Accessibility)

Maximum contrast theme for accessibility needs. WCAG AAA compliant.

---
theme: scholarly
themeConfig:
  colorTheme: high-contrast
---

Colors:

• Primary: #000000 (Black)
• Accent: #0066cc (Blue)
• Background: #ffffff (White)

Typography Themes

Choose from 8 carefully curated font combinations:

Classic Palatino (Default)

Traditional academic typography with Palatino serif and Helvetica sans.

---
theme: scholarly
# Classic is the default
---

Fonts:

• Serif: Palatino Linotype, Book Antiqua, Palatino
• Sans: Helvetica Neue, Helvetica, Arial

Modern Academica

Contemporary academic styling with Georgia and Source Sans Pro.

---
theme: scholarly
themeConfig:
  fontTheme: modern
---

Fonts:

• Serif: Georgia, Cambria
• Sans: Source Sans Pro, Segoe UI, Roboto

Traditional Garamond

Classic book typography with Garamond.

---
theme: scholarly
themeConfig:
  fontTheme: traditional
---

Fonts:

• Serif: Garamond, Baskerville
• Sans: Gill Sans, Optima, Helvetica

Contemporary Sans

Clean, modern sans-serif focused design.

---
theme: scholarly
themeConfig:
  fontTheme: contemporary
---

Fonts:

• Serif: Charter, Georgia, Cambria
• Sans: Inter, SF Pro Display, Segoe UI

Humanist

Warm, readable humanist typefaces.

---
theme: scholarly
themeConfig:
  fontTheme: humanist
---

Fonts:

• Serif: Crimson Text, Libre Baskerville, Georgia
• Sans: Open Sans, Noto Sans

Technical

LaTeX-inspired technical typography.

---
theme: scholarly
themeConfig:
  fontTheme: technical
---

Fonts:

• Serif: Computer Modern, Latin Modern
• Sans: IBM Plex Sans, Roboto

Elegant Serif

Refined, elegant serif typography.

---
theme: scholarly
themeConfig:
  fontTheme: elegant
---

Fonts:

• Serif: Cormorant Garamond, EB Garamond
• Sans: Montserrat, Lato

Sans Default

Sans-serif focused typography for modern presentations.

---
theme: scholarly
themeConfig:
  fontTheme: sans-default
---

Fonts:

• Sans: Inter, SF Pro Display, system-ui
• Serif: Georgia, Cambria (for fallback)

Combining Themes

You can combine color and typography themes:

---
theme: scholarly
themeConfig:
  colorTheme: oxford-burgundy
  fontTheme: traditional
  colorMode: dark    # Optional: header/footer style ('dark' default)
  sectionMode: light  # Optional: set default section appearance
---

Color Mode

Control the appearance of the theme “chrome” (header/footer background + text color) independently from Slidev’s dark mode.

Global Default

Set it in headmatter:

---
theme: scholarly
themeConfig:
  colorMode: light # or 'dark' (default)
---

Priority Chain

Global themeConfig.colorMode > 'dark' (default)

Value	Description
dark	Dark gradient chrome with light text (default)
light	Light chrome background with dark text

Section Mode

Control the appearance of section layout slides independently:

Global Default

Set a default for all section slides in your headmatter:

---
theme: scholarly
themeConfig:
  sectionMode: light  # or 'dark' (default)
---

Per-Slide Override

Override the global setting on individual section slides:

---
layout: section
sectionMode: dark  # Override global 'light' setting
---

# This Section Uses Dark Mode

Priority Chain

Per-slide sectionMode > Global themeConfig.sectionMode > 'dark' (default)

Value	Description
dark	Dark gradient background with light text (default)
light	Light background with dark text

Custom Colors

Override specific colors while using a theme:

---
theme: scholarly
themeColors:
  primary: '#your-custom-color'
  accent: '#your-accent-color'
---

Note: avoid setting themeConfig.primary if you want themeConfig.colorTheme presets to take effect, as Slidev maps it to --slidev-theme-primary on <body> and it will override the preset.

Live Examples

Each color theme has a dedicated example file demonstrating the theme in action:

Theme	Command
Classic Blue	pnpm run dev -- examples/example-classic-blue.md
Oxford Burgundy	pnpm run dev -- examples/example-oxford.md
Cambridge Green	pnpm run dev -- examples/example-cambridge.md
Yale Blue	pnpm run dev -- examples/example-yale.md
Princeton Orange	pnpm run dev -- examples/example-princeton.md
Nordic Blue	pnpm run dev -- examples/example-nordic.md
Monochrome	pnpm run dev -- examples/example-monochrome.md
Warm Sepia	pnpm run dev -- examples/example-sepia.md
High Contrast	pnpm run dev -- examples/example-high-contrast.md

The decks in examples/ use theme: ../ so they work when running Slidev from this repository. If you installed the theme from npm, change it to theme: scholarly.

Implementation Details

Themes are applied using CSS custom properties and data attributes:

• Color themes use [data-color-theme="theme-name"]
• Font themes use [data-font-theme="theme-name"]
• Color mode uses [data-color-mode="dark/light"] (controls header/footer “chrome”)

This allows for seamless theme switching without reloading the presentation.

Regenerate Theme Screenshots

To export the first 4 slides of every theme example into images/themes/* (and sync to docs/public/images/themes/*), run:

pnpm run export:theme-images