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)

手动安装

npm install slidev-theme-seriph

官方主题

default

内置默认主题。

---
theme: default
---

• 简洁、极简的设计
• 支持浅色和深色模式
• 标准布局

seriph

采用衬线字体的优雅主题。

---
theme: seriph
---

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

apple-basic

灵感来自 Apple keynote 的设计。

---
theme: apple-basic
---

• 简洁、现代的外观
• Apple 风格美学
• 尽量减少干扰

bricks

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

---
theme: bricks
---

• 鲜明的色彩
• 活泼的设计
• 适合创意内容

shibainu

采用柴犬风格的主题。

---
theme: shibainu
---

社区主题

在主题库中查看更多：

热门社区主题包括：

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

安装社区主题

npm install slidev-theme-penguin

---
theme: penguin
---

主题配置

themeConfig

向主题传递配置：

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

可用选项

每个主题都有自己的选项。请查看主题文档，了解以下内容：

• 颜色自定义
• 字体设置
• 布局选项
• 组件变体

常见的 themeConfig 选项

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

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

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

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

基本布局

<template>
  <div class="slidev-layout default">
    <slot />
  </div>
</template>

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

封面布局

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

主题组件

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

带配置的主题

接受配置

<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',
  })
})

发布主题

为 NPM 做准备

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

发布

npm publish

提交到主题库

向 Slidev 的主题库仓库提交 PR。

主题最佳实践

1. 同时支持两种配色方案

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

/* Dark mode */
.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

4. 记录配置说明

README 应包含：

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

5. 充分测试

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

输出格式

配置主题时：

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

主题选择：

• 选择的主题：[名称]
• 原因：[此主题为何合适]

自定义：

• 主色：[hex]
• 次色：[hex]
• 自定义选项：[列表]

其他文件（如果已弹出）：

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