Slidev Themes Skill | Agent Skills

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:

---
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:

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

Manual Installation

npm install slidev-theme-seriph

Official Themes

default

The built-in default theme.

---
theme: default
---

Clean, minimal design
Light and dark mode support
Standard layouts

seriph

Elegant theme with serif typography.

---
theme: seriph
---

Elegant serif fonts
Sophisticated styling
Professional appearance

apple-basic

Apple keynote-inspired design.

---
theme: apple-basic
---

Clean, modern look
Apple-style aesthetics
Minimal distractions

bricks

Colorful, vibrant theme.

---
theme: bricks
---

Bold colors
Playful design
Good for creative content

shibainu

Theme featuring Shiba Inu styling.

---
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

npm install slidev-theme-penguin

---
theme: penguin
---

Theme Configuration

themeConfig

Pass configuration to themes:

---
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

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

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

  # Layout
  padding: '2rem'

Color Schema

Auto (Default)

---
colorSchema: auto
---

Follows system preference.

Force Light

---
colorSchema: light
---

Force Dark

---
colorSchema: dark
---

Ejecting Themes

Why Eject?

To fully customize a theme's source code:

Modify layouts
Change components
Deep style customization

How to Eject

slidev theme eject

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

Ejected Structure

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

Using Ejected Theme

---
theme: ./theme
---

Creating Custom Themes

Theme Structure

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

{
  "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

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

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

Cover Layout

<!-- 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

/* 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

<!-- 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

<!-- 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:

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

npm publish

Submit to Gallery

Open a PR to Slidev's theme gallery repository.

Theme Best Practices

1. Support Both Color Schemes

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

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

2. Use CSS Variables

: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:

---
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

Agent Skills: Slidev Themes

Install this agent skill to your local

Skill Files