全栈攻城狮

Appearance

主题系统与安装 ​

主题决定演示文稿的整体视觉风格：配色、字体、布局集合、组件。Slidev 的主题是 npm 包，一条配置即可切换，安装即用。

theme 配置 ​

在 Frontmatter 中指定主题：

markdown
---
theme: seriph
---

Slidev 启动时自动从 npm 拉取主题包。主题名即包名的一部分：

theme 值npm 包
seriph@slidev/theme-seriph
default@slidev/theme-default
gengar@slidev/theme-gengar
apple-basic@slidev/theme-apple-basic

官方主题 ​

seriph 主题 ​

markdown
---
theme: seriph
---
  • 学术/分享风格，衬线标题字体
  • 内置 cover、section、quote 等布局
  • 适合技术分享与课程

default 主题 ​

markdown
---
theme: default
---
  • 简洁的默认风格，无衬线字体
  • 最基础的布局集合
  • 适合快速开始与通用内容

gengar 主题 ​

markdown
---
theme: gengar
---
  • 深色为主的演示风格
  • 适合发布会与暗色场景

其他官方主题 ​

  • apple-basic：苹果发布会风格，大标题大字
  • bricks：卡片式彩色主题
  • 官方列表见 Slidev 文档主题页

社区主题安装 ​

社区主题同样通过 theme: 配置自动安装，或手动指定包名：

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

手动安装：

bash
npm install slidev-theme-xxx
markdown
---
theme: slidev-theme-xxx
---

查找社区主题：在 npm 搜索 slidev theme，或访问 Slidev 官网主题展示页预览效果。

主题切换 ​

同一份文稿切换主题只需修改 theme:：

markdown
---
theme: seriph
---

# 用 seriph 风格

---

---
theme: default
---

# 本页用 default 风格
  • 全局 theme: 设置整份文稿主题
  • 页级 theme: 可单独覆盖某页

切换主题后，布局名相同的页面自动复用新主题的版式。

主题覆盖与定制 ​

不弹出主题也能做局部覆盖：在文稿中写全局样式覆盖主题细节。

markdown
<style global>
h1 {
  font-family: 'Noto Sans SC', sans-serif;
  color: #42b883;
}
:root {
  --slidev-theme-primary: #42b883;
}
</style>
覆盖方式做法影响范围
<style global>覆盖字体、颜色等整份文稿
CSS 变量覆盖主题变量主题可配置部分
自定义布局同名布局覆盖使用该布局的页面

主题速查 ​

操作写法
使用官方主题theme: seriph
使用社区主题theme: slidev-theme-xxx
手动安装npm install slidev-theme-xxx
全局覆盖样式<style global>
覆盖主题变量:root { --变量: 值 }

主题让演示一键拥有专业视觉；需要深度定制时，用 slidev theme eject 弹出主题到本地改造（见「主题开发与弹出」）。