slidev-themes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Slidev Themes

Slidev 主题

This skill covers using, customizing, and creating themes for Slidev presentations. Themes provide consistent styling, layouts, and components across your slides.

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

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:

yaml

---
theme: seriph
---

在你的第一张幻灯片的前置元数据中：

yaml

---
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
```
)

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

Auto-Installation

自动安装

Slidev automatically prompts to install missing themes:

bash

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

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

bash

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

Manual Installation

手动安装

bash

npm install slidev-theme-seriph

bash

npm install slidev-theme-seriph

Official Themes

官方主题

default

The built-in default theme.

yaml

---
theme: default
---

Clean, minimal design
Light and dark mode support
Standard layouts

内置的默认主题。

yaml

---
theme: default
---

简洁、极简设计
支持亮色与暗色模式
标准布局

seriph

Elegant theme with serif typography.

yaml

---
theme: seriph
---

Elegant serif fonts
Sophisticated styling
Professional appearance

带有衬线字体的优雅主题。

yaml

---
theme: seriph
---

优雅的衬线字体
精致的样式
专业的外观

apple-basic

Apple keynote-inspired design.

yaml

---
theme: apple-basic
---

Clean, modern look
Apple-style aesthetics
Minimal distractions

灵感来自Apple Keynote的设计。

yaml

---
theme: apple-basic
---

简洁、现代的外观
Apple风格美学
极少干扰元素

bricks

Colorful, vibrant theme.

yaml

---
theme: bricks
---

Bold colors
Playful design
Good for creative content

色彩丰富、充满活力的主题。

yaml

---
theme: bricks
---

大胆的色彩
活泼的设计
适合创意内容

shibainu

Theme featuring Shiba Inu styling.

yaml

---
theme: shibainu
---

以柴犬风格为特色的主题。

yaml

---
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
```

在主题画廊中查找更多主题：

热门社区主题包括：

```
slidev-theme-penguin
```
```
slidev-theme-purplin
```
```
slidev-theme-geist
```
```
slidev-theme-dracula
```
```
slidev-theme-eloc
```

Installing Community Themes

安装社区主题

bash

npm install slidev-theme-penguin

yaml

---
theme: penguin
---

bash

npm install slidev-theme-penguin

yaml

---
theme: penguin
---

Theme Configuration

主题配置

themeConfig

Pass configuration to themes:

yaml

---
theme: seriph
themeConfig:
  primary: '#5d8392'
  secondary: '#8b5cf6'
  tertiary: '#3b82f6'
  darkBg: '#1a1a2e'
  lightBg: '#f8fafc'
---

向主题传递配置：

yaml

---
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选项

yaml

themeConfig:
  # Colors
  primary: '#3b82f6'
  secondary: '#10b981'
  background: '#ffffff'
  text: '#1e293b'

  # Typography
  fontFamily: 'Inter'
  fontSize: '16px'

  # Layout
  padding: '2rem'

yaml

themeConfig:
  # 颜色
  primary: '#3b82f6'
  secondary: '#10b981'
  background: '#ffffff'
  text: '#1e293b'

  # 排版
  fontFamily: 'Inter'
  fontSize: '16px'

  # 布局
  padding: '2rem'

Color Schema

颜色方案

Auto (Default)

自动（默认）

yaml

---
colorSchema: auto
---

Follows system preference.

yaml

---
colorSchema: auto
---

跟随系统偏好设置。

Force Light

强制亮色模式

yaml

---
colorSchema: light
---

yaml

---
colorSchema: light
---

Force Dark

强制暗色模式

yaml

---
colorSchema: dark
---

yaml

---
colorSchema: dark
---

Ejecting Themes

导出主题

Why Eject?

为什么要导出？

To fully customize a theme's source code:

Modify layouts
Change components
Deep style customization

要完全自定义主题的源代码：

修改布局
更改组件
深度样式自定义

How to Eject

如何导出

bash

slidev theme eject

This copies the theme to your project's local files.

bash

slidev theme eject

此命令会将主题复制到项目的本地文件中。

Ejected Structure

导出后的结构

my-presentation/
├── slides.md
├── theme/
│   ├── layouts/
│   │   ├── default.vue
│   │   ├── cover.vue
│   │   └── ...
│   ├── components/
│   ├── styles/
│   │   └── index.css
│   └── setup/
│       └── main.ts
└── package.json

my-presentation/
├── slides.md
├── theme/
│   ├── layouts/
│   │   ├── default.vue
│   │   ├── cover.vue
│   │   └── ...
│   ├── components/
│   ├── styles/
│   │   └── index.css
│   └── setup/
│       └── main.ts
└── package.json

Using Ejected Theme

使用导出的主题

yaml

---
theme: ./theme
---

yaml

---
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

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

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"
    }
  }
}

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

基础布局

vue

<!-- layouts/default.vue -->
<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

<style scoped>
.default {
  padding: 2rem;
  height: 100%;
}
</style>

vue

<!-- layouts/default.vue -->
<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

<style scoped>
.default {
  padding: 2rem;
  height: 100%;
}
</style>

Cover Layout

封面布局

vue

<!-- 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>

vue

<!-- 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

全局样式

css

/* 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);
}

css

/* 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

主题组件

vue

<!-- 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>

vue

<!-- 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

接收配置

vue

<!-- 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>

vue

<!-- 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

默认配置

setup/main.ts

typescript

import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app }) => {
  app.provide('themeDefaults', {
    primary: '#3b82f6',
    secondary: '#10b981',
  })
})

在

setup/main.ts

中：

typescript

import { defineAppSetup } from '@slidev/types'

export default defineAppSetup(({ app }) => {
  app.provide('themeDefaults', {
    primary: '#3b82f6',
    secondary: '#10b981',
  })
})

Publishing Themes

发布主题

Prepare for NPM

为NPM做准备

Ensure
```
package.json
```
has correct fields
Add README with usage instructions
Include screenshots

确保
```
package.json
```
包含正确的字段
添加包含使用说明的README
包含截图

Publish

发布

bash

npm publish

bash

npm publish

Submit to Gallery

提交到主题画廊

Open a PR to Slidev's theme gallery repository.

向Slidev的主题画廊仓库发起PR。

Theme Best Practices

主题最佳实践

1. Support Both Color Schemes

1. 支持两种颜色方案

css

/* Light mode */
.slidev-layout {
  background: #ffffff;
  color: #1e293b;
}

/* Dark mode */
.dark .slidev-layout {
  background: #0f172a;
  color: #f1f5f9;
}

css

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

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

2. Use CSS Variables

2. 使用CSS变量

css

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

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

css

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

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

3. Provide Common Layouts

3. 提供通用布局

Essential layouts:

```
default
```
```
cover
```
```
center
```
```
two-cols
```
```
section
```
```
end
```

必备布局：

```
default
```
```
cover
```
```
center
```
```
two-cols
```
```
section
```
```
end
```

4. Document Configuration

4. 记录配置说明

README should include:

Available themeConfig options
Example usage
Screenshots
Layout descriptions

README应包含：

可用的themeConfig选项
使用示例
截图
布局说明

5. Test Thoroughly

5. 全面测试

Test all layouts
Test light and dark modes
Test with real content
Test export to PDF

测试所有布局
测试亮色与暗色模式
使用真实内容测试
测试导出为PDF

Output Format

输出格式

When configuring themes:

yaml

---
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

配置主题时：

yaml

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

主题选择：

选定主题：[名称]
理由：[该主题适合的原因]

自定义内容：

主色调：[十六进制颜色值]
辅助色：[十六进制颜色值]
自定义选项：[列表]

额外文件（若导出主题）：

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