slidev-themes

name	slidev-themes
description	Use and customize Slidev themes. Use this skill to apply themes, configure theme options, and create custom 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