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
- Support Both Color Schemes
/* Light mode */ .slidev-layout { background: #ffffff; color: #1e293b; }
/* Dark mode */ .dark .slidev-layout { background: #0f172a; color: #f1f5f9; }
- Use CSS Variables
:root { --theme-primary: #3b82f6; }
.primary { color: var(--theme-primary); }
- Provide Common Layouts
Essential layouts:
-
default
-
cover
-
center
-
two-cols
-
section
-
end
- Document Configuration
README should include:
-
Available themeConfig options
-
Example usage
-
Screenshots
-
Layout descriptions
- 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