szeyu/slidev-themes

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

1. Ensure package.json has correct fields
2. Add README with usage instructions
3. 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