Slidev Themes

This skill covers using, customizing, and creating themes for Slidev presentations. Themes provide consistent styling, layouts, and components across your slides.

When to Use This Skill

•Choosing a theme for your presentation
•Customizing theme colors and styles
•Ejecting and modifying themes
•Creating your own theme
•Understanding theme structure

Using Themes

Setting a Theme

In your first slide's frontmatter:

yaml

---
theme: seriph
---

Theme Name Conventions

•Official themes: Use short name (seriph, default)
•NPM packages: Use full name (slidev-theme-custom)
•Local themes: Use path (./my-theme)

Auto-Installation

Slidev automatically prompts to install missing themes:

bash

? The theme "seriph" was not found, do you want to install it now? (Y/n)

Manual Installation

bash

npm install slidev-theme-seriph

Official Themes

default

The built-in default theme.

yaml

---
theme: default
---

•Clean, minimal design
•Light and dark mode support
•Standard layouts

seriph

Elegant theme with serif typography.

yaml

---
theme: seriph
---

•Elegant serif fonts
•Sophisticated styling
•Professional appearance

apple-basic

Apple keynote-inspired design.

yaml

---
theme: apple-basic
---

•Clean, modern look
•Apple-style aesthetics
•Minimal distractions

bricks

Colorful, vibrant theme.

yaml

---
theme: bricks
---

•Bold colors
•Playful design
•Good for creative content

shibainu

Theme featuring Shiba Inu styling.

yaml

---
theme: shibainu
---

Community Themes

Find more at the Theme Gallery:

Popular community themes include:

•slidev-theme-penguin
•slidev-theme-purplin
•slidev-theme-geist
•slidev-theme-dracula
•slidev-theme-eloc

Installing Community Themes

bash

npm install slidev-theme-penguin

yaml

---
theme: penguin
---

Theme Configuration

themeConfig

Pass configuration to themes:

yaml

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
  tertiary: '#3b82f6'
  darkBg: '#1a1a2e'
  lightBg: '#f8fafc'
---

Available Options

Each theme defines its own options. Check theme documentation for:

•Color customization
•Font settings
•Layout options
•Component variants

Common themeConfig Options

yaml

themeConfig:
  # Colors
  primary: '#3b82f6'
  secondary: '#10b981'
  background: '#ffffff'
  text: '#1e293b'

  # Typography
  fontFamily: 'Inter'
  fontSize: '16px'

  # Layout
  padding: '2rem'

Color Schema

Auto (Default)

yaml

---
colorSchema: auto
---

Follows system preference.

Force Light

yaml

---
colorSchema: light
---

Force Dark

yaml

---
colorSchema: dark
---

Ejecting Themes

Why Eject?

To fully customize a theme's source code:

•Modify layouts
•Change components
•Deep style customization

How to Eject

bash

slidev theme eject

This copies the theme to your project's local files.

Ejected Structure

code

my-presentation/
├── slides.md
├── theme/
│   ├── layouts/
│   │   ├── default.vue
│   │   ├── cover.vue
│   │   └── ...
│   ├── components/
│   ├── styles/
│   │   └── index.css
│   └── setup/
│       └── main.ts
└── package.json

Using Ejected Theme

yaml

---
theme: ./theme
---

Creating Custom Themes

Theme Structure

code

slidev-theme-mytheme/
├── package.json
├── layouts/
│   ├── default.vue
│   ├── cover.vue
│   ├── center.vue
│   └── two-cols.vue
├── components/
│   └── MyComponent.vue
├── styles/
│   └── index.css
└── setup/
    ├── main.ts
    └── shiki.ts

package.json

json

{
  "name": "slidev-theme-mytheme",
  "version": "1.0.0",
  "keywords": [
    "slidev-theme",
    "slidev"
  ],
  "engines": {
    "slidev": ">=0.40.0"
  },
  "slidev": {
    "colorSchema": "both",
    "highlighter": "shiki",
    "fonts": {
      "sans": "Inter",
      "mono": "Fira Code"
    }
  }
}

Basic Layout

vue

<!-- layouts/default.vue -->
<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

<style scoped>
.default {
  padding: 2rem;
  height: 100%;
}
</style>

Cover Layout

vue

<!-- layouts/cover.vue -->
<script setup>
defineProps({
  background: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <div
    class="slidev-layout cover"
    :style="{
      backgroundImage: background ? `url(${background})` : undefined
    }"
  >
    <div class="content">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
}

.content {
  text-align: center;
}
</style>

Global Styles

css

/* styles/index.css */
:root {
  --slidev-theme-primary: #3b82f6;
  --slidev-theme-secondary: #10b981;
  --slidev-theme-text: #1e293b;
  --slidev-theme-background: #ffffff;
}

.dark {
  --slidev-theme-text: #f1f5f9;
  --slidev-theme-background: #0f172a;
}

.slidev-layout {
  color: var(--slidev-theme-text);
  background: var(--slidev-theme-background);
}

h1 {
  color: var(--slidev-theme-primary);
  font-weight: 700;
}

a {
  color: var(--slidev-theme-secondary);
}

Theme Components

vue

<!-- components/ThemedCard.vue -->
<script setup>
defineProps({
  title: String,
  variant: {
    type: String,
    default: 'primary'
  }
})
</script>

<template>
  <div :class="['themed-card', `variant-${variant}`]">
    <h3 v-if="title">{{ title }}</h3>
    <slot />
  </div>
</template>

<style scoped>
.themed-card {
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin: 1rem 0;
}

.variant-primary {
  background: var(--slidev-theme-primary);
  color: white;
}

.variant-secondary {
  background: var(--slidev-theme-secondary);
  color: white;
}
</style>

Theme with Config

Accepting Configuration

vue

<!-- layouts/default.vue -->
<script setup>
import { useSlideContext } from '@slidev/client'

const { $slidev } = useSlideContext()
const primaryColor = $slidev.themeConfigs?.primary || '#3b82f6'
</script>

<template>
  <div class="layout" :style="{ '--primary': primaryColor }">
    <slot />
  </div>
</template>

Default Config

In setup/main.ts:

typescript

import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app }) => {
  app.provide('themeDefaults', {
    primary: '#3b82f6',
    secondary: '#10b981',
  })
})

Publishing Themes

Prepare for NPM

•Ensure package.json has correct fields
•Add README with usage instructions
•Include screenshots

Publish

bash

npm publish

Submit to Gallery

Open a PR to Slidev's theme gallery repository.

Theme Best Practices

1. Support Both Color Schemes

css

/* Light mode */
.slidev-layout {
  background: #ffffff;
  color: #1e293b;
}

/* Dark mode */
.dark .slidev-layout {
  background: #0f172a;
  color: #f1f5f9;
}

2. Use CSS Variables

css

:root {
  --theme-primary: #3b82f6;
}

.primary {
  color: var(--theme-primary);
}

3. Provide Common Layouts

Essential layouts:

•default
•cover
•center
•two-cols
•section
•end

4. Document Configuration

README should include:

•Available themeConfig options
•Example usage
•Screenshots
•Layout descriptions

5. Test Thoroughly

•Test all layouts
•Test light and dark modes
•Test with real content
•Test export to PDF

Output Format

When configuring themes:

yaml

---
theme: [theme-name]
colorSchema: [auto|light|dark]
themeConfig:
  primary: '[color]'
  secondary: '[color]'
  [other options specific to theme]
---

THEME SELECTION:

•Chosen theme: [name]
•Reason: [why this theme fits]

CUSTOMIZATION:

•Primary color: [hex]
•Secondary color: [hex]
•Custom options: [list]

ADDITIONAL FILES (if ejected):

•layouts/[modified].vue
•styles/index.css