Slidev主题使用指南：官方与社区主题安装、自定义配色、弹出与创建完整教程

slidev-themes by yoanbernabeu/slidev-skills

74 周安装量

22 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-themes

演讲技巧内容创作开发

🇨🇳中文介绍

Slidev 主题

本技能涵盖 Slidev 演示文稿主题的使用、自定义和创建。主题为您的幻灯片提供一致的样式、布局和组件。

何时使用此技能

为演示文稿选择主题
自定义主题颜色和样式
弹出并修改主题
创建自己的主题
理解主题结构

使用主题

设置主题

在您第一张幻灯片的 frontmatter 中：

---
theme: seriph
---

主题命名约定

官方主题：使用短名称（seriph、default）
NPM 包：使用完整名称（slidev-theme-custom）
本地主题：使用路径（./my-theme）

自动安装

Slidev 会自动提示安装缺失的主题：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

常见的 themeConfig 选项

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 具有正确的字段
添加包含使用说明的 README
包含截图

向 Slidev 的主题画廊仓库提交一个 PR。

1. 支持两种配色方案

/* 浅色模式 */
.slidev-layout {
  background: #ffffff;
  color: #1e293b;
}

/* 深色模式 */
.dark .slidev-layout {
  background: #0f172a;
  color: #f1f5f9;
}

2. 使用 CSS 变量

:root {
  --theme-primary: #3b82f6;
}

.primary {
  color: var(--theme-primary);
}

3. 提供常用布局

default
cover
center
two-cols
section
end

可用的 themeConfig 选项
使用示例
截图
布局描述

测试所有布局
测试浅色和深色模式
使用真实内容测试
测试导出为 PDF

---
theme: [theme-name]
colorSchema: [auto|light|dark]
themeConfig:
  primary: '[color]'
  secondary: '[color]'
  [other options specific to theme]
---

所选主题：[name]
原因：[why this theme fits]

主色：[hex]
辅色：[hex]
自定义选项：[list]

附加文件（如果已弹出）：

layouts/[modified].vue
styles/index.css

2026 年 1 月 25 日

🇺🇸English

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

Weekly Installs

Repository

yoanbernabeu/sl…v-skills

GitHub Stars

First Seen

Jan 25, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode61

gemini-cli59

codex59

github-copilot58

cursor57

amp56

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

120,000 周安装

Slidev主题使用指南：官方与社区主题安装、自定义配色、弹出与创建完整教程

🇨🇳中文介绍

Slidev 主题

何时使用此技能

使用主题

设置主题

主题命名约定

自动安装

相关 Skills

手动安装

官方主题

default

seriph

apple-basic

bricks

shibainu

社区主题

安装社区主题

主题配置

themeConfig

可用选项

常见的 themeConfig 选项

配色方案

自动（默认）

强制浅色

强制深色

弹出主题

为何弹出？

如何弹出

弹出后的结构

使用弹出的主题

创建自定义主题

主题结构

package.json

基本布局

封面布局

全局样式

主题组件

带配置的主题

接受配置

默认配置

发布主题

为 NPM 做准备

发布

提交到画廊

主题最佳实践

1. 支持两种配色方案

2. 使用 CSS 变量

3. 提供常用布局

4. 记录配置

5. 全面测试

输出格式

🇺🇸English

Slidev Themes

When to Use This Skill

Using Themes

Setting a Theme

Theme Name Conventions

Auto-Installation

Manual Installation

Official Themes

default

seriph

apple-basic

bricks

shibainu

Community Themes

Installing Community Themes

Theme Configuration

themeConfig

Available Options

Common themeConfig Options

Color Schema

Auto (Default)

Force Light

Force Dark

Ejecting Themes

Why Eject?

How to Eject

Ejected Structure