slidev-themes by yoanbernabeu/slidev-skills
npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-themes本技能涵盖 Slidev 演示文稿主题的使用、自定义和创建。主题为您的幻灯片提供一致的样式、布局和组件。
在您第一张幻灯片的 frontmatter 中:
---
theme: seriph
---
seriph、default)slidev-theme-custom)./my-theme)Slidev 会自动提示安装缺失的主题:
? The theme "seriph" was not found, do you want to install it now? (Y/n)
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
npm install slidev-theme-seriph
内置的默认主题。
---
theme: default
---
采用衬线字体的优雅主题。
---
theme: seriph
---
受 Apple Keynote 启发的设计。
---
theme: apple-basic
---
色彩丰富、充满活力的主题。
---
theme: bricks
---
采用柴犬风格的主题。
---
theme: shibainu
---
在 主题画廊 中查找更多:
流行的社区主题包括:
slidev-theme-penguinslidev-theme-purplinslidev-theme-geistslidev-theme-draculaslidev-theme-elocnpm install slidev-theme-penguin
---
theme: penguin
---
向主题传递配置:
---
theme: seriph
themeConfig:
primary: '#5d8392'
secondary: '#8b5cf6'
tertiary: '#3b82f6'
darkBg: '#1a1a2e'
lightBg: '#f8fafc'
---
每个主题定义自己的选项。请查看主题文档以了解:
themeConfig:
# 颜色
primary: '#3b82f6'
secondary: '#10b981'
background: '#ffffff'
text: '#1e293b'
# 排版
fontFamily: 'Inter'
fontSize: '16px'
# 布局
padding: '2rem'
---
colorSchema: auto
---
遵循系统偏好。
---
colorSchema: light
---
---
colorSchema: dark
---
为了完全自定义主题的源代码:
slidev theme eject
这会将主题复制到您项目的本地文件中。
my-presentation/
├── slides.md
├── theme/
│ ├── layouts/
│ │ ├── default.vue
│ │ ├── cover.vue
│ │ └── ...
│ ├── components/
│ ├── styles/
│ │ └── index.css
│ └── setup/
│ └── main.ts
└── package.json
---
theme: ./theme
---
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
{
"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"
}
}
}
<!-- layouts/default.vue -->
<template>
<div class="slidev-layout default">
<slot />
</div>
</template>
<style scoped>
.default {
padding: 2rem;
height: 100%;
}
</style>
<!-- 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>
/* 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);
}
<!-- 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>
<!-- 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>
在 setup/main.ts 中:
import { defineAppSetup } from '@slidev/types'
export default defineAppSetup(({ app }) => {
app.provide('themeDefaults', {
primary: '#3b82f6',
secondary: '#10b981',
})
})
package.json 具有正确的字段npm publish
向 Slidev 的主题画廊仓库提交一个 PR。
/* 浅色模式 */
.slidev-layout {
background: #ffffff;
color: #1e293b;
}
/* 深色模式 */
.dark .slidev-layout {
background: #0f172a;
color: #f1f5f9;
}
:root {
--theme-primary: #3b82f6;
}
.primary {
color: var(--theme-primary);
}
基本布局:
defaultcovercentertwo-colssectionendREADME 应包含:
配置主题时:
---
theme: [theme-name]
colorSchema: [auto|light|dark]
themeConfig:
primary: '[color]'
secondary: '[color]'
[other options specific to theme]
---
主题选择:
自定义:
附加文件(如果已弹出):
每周安装次数
74
仓库
GitHub 星标数
22
首次出现
2026 年 1 月 25 日
安全审计
安装于
opencode61
gemini-cli59
codex59
github-copilot58
cursor57
amp56
This skill covers using, customizing, and creating themes for Slidev presentations. Themes provide consistent styling, layouts, and components across your slides.
In your first slide's frontmatter:
---
theme: seriph
---
seriph, default)slidev-theme-custom)./my-theme)Slidev automatically prompts to install missing themes:
? The theme "seriph" was not found, do you want to install it now? (Y/n)
npm install slidev-theme-seriph
The built-in default theme.
---
theme: default
---
Elegant theme with serif typography.
---
theme: seriph
---
Apple keynote-inspired design.
---
theme: apple-basic
---
Colorful, vibrant theme.
---
theme: bricks
---
Theme featuring Shiba Inu styling.
---
theme: shibainu
---
Find more at the Theme Gallery:
Popular community themes include:
slidev-theme-penguinslidev-theme-purplinslidev-theme-geistslidev-theme-draculaslidev-theme-elocnpm install slidev-theme-penguin
---
theme: penguin
---
Pass configuration to themes:
---
theme: seriph
themeConfig:
primary: '#5d8392'
secondary: '#8b5cf6'
tertiary: '#3b82f6'
darkBg: '#1a1a2e'
lightBg: '#f8fafc'
---
Each theme defines its own options. Check theme documentation for:
themeConfig:
# Colors
primary: '#3b82f6'
secondary: '#10b981'
background: '#ffffff'
text: '#1e293b'
# Typography
fontFamily: 'Inter'
fontSize: '16px'
# Layout
padding: '2rem'
---
colorSchema: auto
---
Follows system preference.
---
colorSchema: light
---
---
colorSchema: dark
---
To fully customize a theme's source code:
slidev theme eject
This copies the theme to your project's local files.
my-presentation/
├── slides.md
├── theme/
│ ├── layouts/
│ │ ├── default.vue
│ │ ├── cover.vue
│ │ └── ...
│ ├── components/
│ ├── styles/
│ │ └── index.css
│ └── setup/
│ └── main.ts
└── package.json
---
theme: ./theme
---
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
{
"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"
}
}
}
<!-- layouts/default.vue -->
<template>
<div class="slidev-layout default">
<slot />
</div>
</template>
<style scoped>
.default {
padding: 2rem;
height: 100%;
}
</style>
<!-- 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>
/* 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);
}
<!-- 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>
<!-- 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>
In setup/main.ts:
import { defineAppSetup } from '@slidev/types'
export default defineAppSetup(({ app }) => {
app.provide('themeDefaults', {
primary: '#3b82f6',
secondary: '#10b981',
})
})
package.json has correct fieldsnpm publish
Open a PR to Slidev's theme gallery repository.
/* Light mode */
.slidev-layout {
background: #ffffff;
color: #1e293b;
}
/* Dark mode */
.dark .slidev-layout {
background: #0f172a;
color: #f1f5f9;
}
:root {
--theme-primary: #3b82f6;
}
.primary {
color: var(--theme-primary);
}
Essential layouts:
defaultcovercentertwo-colssectionendREADME should include:
When configuring themes:
---
theme: [theme-name]
colorSchema: [auto|light|dark]
themeConfig:
primary: '[color]'
secondary: '[color]'
[other options specific to theme]
---
THEME SELECTION:
CUSTOMIZATION:
ADDITIONAL FILES (if ejected):
Weekly Installs
74
Repository
GitHub Stars
22
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode61
gemini-cli59
codex59
github-copilot58
cursor57
amp56
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
120,000 周安装
fal.ai平台API使用指南:模型管理、定价查询、成本估算与使用追踪
147 周安装
iOS网络框架迁移指南:从BSD套接字/URLSession迁移到Network.framework与NetworkConnection
146 周安装
iOS Core Spotlight与NSUserActivity指南:实现Spotlight搜索、Siri预测与接力功能
147 周安装
性能回归调试指南:快速检测、定位与修复应用性能下降问题
146 周安装
间歇性问题调试指南 - 系统化排查偶发错误与竞态条件 | 软件开发调试技巧
148 周安装
stealth-browser:macOS隐形Chrome自动化工具,绕过网站检测实现网页抓取
150 周安装