主题开发与弹出

在官方主题基础上改配色，或从零构建自己的主题包，都能让演示风格完全私有化。本章覆盖从弹出主题到发布 npm 包的完整链路。

弹出主题 eject

把已安装的主题复制到本地项目目录进行修改：

slidev theme eject

交互选择要弹出的主题后，主题文件被复制到项目 theme/ 目录：

my-deck/
└── theme/                # 弹出后的主题
    ├── layouts/
    ├── styles/
    ├── components/
    └── ...

弹出后，Frontmatter 中仍写原主题名即可使用本地副本：

---
theme: seriph
---

项目根目录的 theme/ 优先于 npm 包，修改后立即生效。

主题结构分析

一个主题包的典型结构：

slidev-theme-xxx/
├── layouts/              # 布局组件（覆盖/新增）
│   ├── cover.vue
│   ├── center.vue
│   └── ...
├── styles/               # 全局样式
│   ├── index.ts
│   └── index.css
├── components/           # 内置组件
├── setup/                # 初始化脚本
├── package.json          # 包配置（slidev 元数据）
└── README.md

目录	作用
layouts/	布局组件，主题版式的核心
styles/	全局样式（字体、配色、主题变量）
components/	主题内置的 Vue 组件
setup/	主题启动时的配置脚本

package.json 主题元数据

{
  "name": "slidev-theme-xxx",
  "version": "1.0.0",
  "keywords": ["slidev-theme", "slidev"],
  "files": ["layouts", "styles", "components", "setup"]
}

• keywords 含 slidev-theme 便于被 Slidev 识别
• files 指定发布时包含的主题目录

自定义主题构建

1. 从模板创建主题

npm create slidev-theme my-theme
cd my-theme
npm install
npm run dev  # 用示例演示文稿预览主题效果

2. 编写布局与样式

在 layouts/ 添加布局、styles/ 设置主题变量：

:root {
  --slidev-theme-primary: #42b883;
  --slidev-theme-secondary: #35495e;
  --slidev-theme-font: 'Noto Sans SC', sans-serif;
}

3. 本地预览

在示例 example.md 中引用自己的主题：

---
theme: ./          # 指向当前主题目录
---

slidev example.md --theme ./   # 或运行时指定主题

发布主题包

构建并发布到 npm：

npm publish

发布前检查：

检查项	说明
package.json	keywords 含 slidev-theme
files 白名单	只发布主题所需目录
README	提供使用说明与示例
版本号	语义化版本

发布后其他项目即可使用：

---
theme: slidev-theme-xxx
---

主题开发速查

操作	命令/写法
弹出主题	slidev theme eject
创建主题模板	npm create slidev-theme my-theme
本地预览	slidev example.md --theme ./
主题变量	:root { --slidev-theme-xxx: 值 }
发布	npm publish

主题开发把自定义布局、样式与组件打包成可复用的交付物：公司内部风格、个人演讲模板都能封装成主题，一条 theme: 配置全局复用。