色彩与字体主题
Slidev Theme Scholarly v2.0 引入了可定制的色彩和字体主题,以匹配您机构的品牌或个人偏好。
主题预览
经典蓝(默认)
牛津酒红
剑桥绿
耶鲁蓝
普林斯顿橙
北欧蓝
单色
暖棕褐色
高对比度
色彩主题
从 9 种专业设计的调色板中选择:
经典学术蓝(默认)
受传统学术机构启发的默认主题。
---
theme: scholarly
# 经典蓝是默认主题,无需额外配置
---颜色:
- 主色:
#1e3a5f(深学术蓝) - 强调色:
#b8860b(学术金) - 背景:
#fdfbf7(暖象牙白)
牛津酒红
受牛津大学启发的丰富酒红色。
---
theme: scholarly
themeConfig:
colorTheme: oxford-burgundy
---颜色:
- 主色:
#862633(牛津酒红) - 强调色:
#c5a572(古董金) - 背景:
#faf8f5(米白色)
剑桥绿
让人联想到剑桥大学的经典绿色。
---
theme: scholarly
themeConfig:
colorTheme: cambridge-green
---颜色:
- 主色:
#00543c(剑桥绿) - 强调色:
#d4af37(金色)
耶鲁蓝
传统耶鲁蓝,呈现出色外观。
---
theme: scholarly
themeConfig:
colorTheme: yale-blue
---颜色:
- 主色:
#0f4d92(耶鲁蓝) - 强调色:
#d4af37(金色)
普林斯顿橙
充满活力的橙色,适合富有激情的演示。
---
theme: scholarly
themeConfig:
colorTheme: princeton-orange
---颜色:
- 主色:
#e87722(普林斯顿橙) - 强调色:
#1c1c1c(黑色)
单色专业
简洁、专业的灰度主题。
---
theme: scholarly
themeConfig:
colorTheme: monochrome
---暖棕褐色
温暖、复古风格的棕褐色调。
---
theme: scholarly
themeConfig:
colorTheme: warm-sepia
---北欧蓝
清爽、斯堪的纳维亚风格的蓝色调色板。
---
theme: scholarly
themeConfig:
colorTheme: nordic-blue
---高对比度(无障碍)
最大对比度主题,满足无障碍需求。符合 WCAG AAA 标准。
---
theme: scholarly
themeConfig:
colorTheme: high-contrast
---颜色:
- 主色:
#000000(黑色) - 强调色:
#0066cc(蓝色) - 背景:
#ffffff(白色)
字体主题
从 8 种精心策划的字体组合中选择:
经典 Palatino(默认)
传统学术排版,使用 Palatino 衬线和 Helvetica 无衬线。
---
theme: scholarly
# Classic 是默认字体主题
---字体:
- 衬线:Palatino Linotype, Book Antiqua, Palatino
- 无衬线:Helvetica Neue, Helvetica, Arial
现代学术
使用 Georgia 和 Source Sans Pro 的现代学术风格。
---
theme: scholarly
themeConfig:
fontTheme: modern
---字体:
- 衬线:Georgia, Cambria
- 无衬线:Source Sans Pro, Segoe UI, Roboto
传统 Garamond
使用 Garamond 的经典图书排版。
---
theme: scholarly
themeConfig:
fontTheme: traditional
---字体:
- 衬线:Garamond, Baskerville
- 无衬线:Gill Sans, Optima, Helvetica
当代无衬线
简洁、现代、以无衬线字体为主的设计。
---
theme: scholarly
themeConfig:
fontTheme: contemporary
---字体:
- 衬线:Charter, Georgia, Cambria
- 无衬线:Inter, SF Pro Display, Segoe UI
人文主义
温暖、易读的人文主义字体。
---
theme: scholarly
themeConfig:
fontTheme: humanist
---字体:
- 衬线:Crimson Text, Libre Baskerville, Georgia
- 无衬线:Open Sans, Noto Sans
技术风格
受 LaTeX 启发的技术排版。
---
theme: scholarly
themeConfig:
fontTheme: technical
---字体:
- 衬线:Computer Modern, Latin Modern
- 无衬线:IBM Plex Sans, Roboto
优雅衬线
精致、优雅的衬线排版。
---
theme: scholarly
themeConfig:
fontTheme: elegant
---字体:
- 衬线:Cormorant Garamond, EB Garamond
- 无衬线:Montserrat, Lato
无衬线默认
以无衬线字体为主的现代演示风格。
---
theme: scholarly
themeConfig:
fontTheme: sans-default
---字体:
- 无衬线:Inter, SF Pro Display, system-ui
- 衬线:Georgia, Cambria(备用)
组合主题
您可以组合色彩和字体主题:
---
theme: scholarly
themeConfig:
colorTheme: oxford-burgundy
fontTheme: traditional
colorMode: dark # 可选:页眉/页脚样式(默认 'dark')
sectionMode: light # 可选:设置 section 布局的默认外观
---颜色模式
独立控制主题“外壳”(页眉/页脚背景 + 文字颜色)的外观,不依赖 Slidev 的暗黑模式。
全局默认值
在首页 headmatter 中设置:
---
theme: scholarly
themeConfig:
colorMode: light # 或 'dark'(默认)
---优先级链
全局 themeConfig.colorMode > 'dark'(默认)| 值 | 描述 |
|---|---|
dark | 深色渐变外壳配浅色文字(默认) |
light | 浅色外壳背景配深色文字 |
章节模式
独立控制 section 布局幻灯片的外观:
全局默认值
在首页的 headmatter 中设置所有 section 幻灯片的默认值:
---
theme: scholarly
themeConfig:
sectionMode: light # 或 'dark'(默认)
---单页覆盖
在单个 section 幻灯片上覆盖全局设置:
---
layout: section
sectionMode: dark # 覆盖全局的 'light' 设置
---
# 此章节使用深色模式优先级链
单页 sectionMode > 全局 themeConfig.sectionMode > 'dark'(默认)| 值 | 描述 |
|---|---|
dark | 深色渐变背景配浅色文字(默认) |
light | 浅色背景配深色文字 |
自定义颜色
在使用主题时覆盖特定颜色:
---
theme: scholarly
themeColors:
primary: '#your-custom-color'
accent: '#your-accent-color'
---注意:如果你希望 themeConfig.colorTheme 预设生效,请避免设置 themeConfig.primary,因为 Slidev 会将它映射为 <body> 上的 --slidev-theme-primary,从而覆盖预设配色。
实时示例
每个色彩主题都有专门的示例文件展示其实际效果:
| 主题 | 命令 |
|---|---|
| 经典蓝 | pnpm run dev -- examples/example-classic-blue.md |
| 牛津酒红 | pnpm run dev -- examples/example-oxford.md |
| 剑桥绿 | pnpm run dev -- examples/example-cambridge.md |
| 耶鲁蓝 | pnpm run dev -- examples/example-yale.md |
| 普林斯顿橙 | pnpm run dev -- examples/example-princeton.md |
| 北欧蓝 | pnpm run dev -- examples/example-nordic.md |
| 单色 | pnpm run dev -- examples/example-monochrome.md |
| 暖棕褐色 | pnpm run dev -- examples/example-sepia.md |
| 高对比度 | pnpm run dev -- examples/example-high-contrast.md |
examples/ 下的示例文档使用了 theme: ../,以便在本仓库中直接运行 Slidev 进行开发预览。如果你是通过 npm 安装的主题,请将其改为 theme: scholarly。
实现细节
主题使用 CSS 自定义属性和数据属性应用:
- 色彩主题使用
[data-color-theme="theme-name"] - 字体主题使用
[data-font-theme="theme-name"] - 颜色模式使用
[data-color-mode="dark/light"](控制页眉/页脚“外壳”)
这允许无缝切换主题,无需重新加载演示文稿。
重新生成主题截图
将每个主题示例的前 4 页导出到 images/themes/*(并同步到 docs/public/images/themes/*):
pnpm run export:theme-images


































