Skip to content

色彩与字体主题 ​

配色和字体可以分别选择。在 slides.md 的第一个 YAML 块中设置:

yaml
---
theme: scholarly
themeConfig:
  colorTheme: oxford-burgundy
  fontTheme: traditional
---

默认组合是 classic-blue 配色与 classic 字体。Oxford、Cambridge 等名称用于标识本主题的预设,并非高校官方模板。

色彩主题 ​

colorTheme主色强调色浅色背景
classic-blue#1e3a5f#b8860b#fdfbf7
oxford-burgundy#862633#c5a572#faf8f5
cambridge-green#00543c#d4af37#f8faf7
yale-blue#0f4d92#d4af37#f7f9fc
princeton-orange#e87722#1c1c1c#fffbf5
nordic-blue#2e5266#d4a762#f5f8fa
warm-sepia#5d4037#d4a574#faf6f1
monochrome#2d3748#718096#ffffff
high-contrast#000000#0066cc#ffffff

上表列出配色基础值,页面实际颜色还受正文和界面明暗模式影响。包括 high-contrast 在内,都应结合最终背景检查图表、链接和文字。

字体主题 ​

每种预设定义一组字体候选,浏览器会使用首个可用字体,因此不同电脑上的效果可能不同。选择预设不会安装其中的全部字体;导出前请确认所需字体可用。

fontTheme正文字体类型衬线字体优先候选无衬线字体优先候选
classic衬线Palatino Linotype, Book Antiqua, PalatinoHelvetica Neue, Helvetica, Arial
modern无衬线Georgia, CambriaSource Sans Pro, Segoe UI, Roboto
traditional衬线Garamond, BaskervilleGill Sans, Optima, Helvetica
contemporary无衬线Charter, Georgia, CambriaInter, SF Pro Display, Segoe UI
humanist无衬线Crimson Text, Libre Baskerville, GeorgiaOpen Sans, Noto Sans
technical无衬线Computer Modern, Latin ModernIBM Plex Sans, Roboto
elegant衬线Cormorant Garamond, EB GaramondMontserrat, Lato
sans-default无衬线Georgia, CambriaInter, SF Pro Display, 系统字体

组合主题 ​

CLI 还提供四种配色与字体组合:classic、oxford、cambridge 和 modern。

bash
pnpm exec sch theme preset list
pnpm exec sch theme preset apply oxford --file slides.md

分别选择配色和字体时,可按本页开头的示例编辑 themeConfig,或运行 pnpm exec sch theme apply oxford-burgundy --font traditional --file slides.md。

各区域的明暗模式 ​

colorTheme 决定配色,contentMode、chromeMode 和 sectionMode 分别控制正文、页眉与放映控件、章节页。常用组合和单个章节页的设置见主题模式与对比度。

自定义颜色 ​

将 themeColors 放在顶层,与 themeConfig 并列:

yaml
---
theme: scholarly
themeConfig:
  colorTheme: classic-blue
themeColors:
  primary: '#254b64'
  accent: '#875d20'
---

支持的字段包括 primary、primaryLight、accent、bgWarm、textPrimary、headerBg、footerLeftBg、footerCenterBg 和 footerRightBg。它们会覆盖文档根节点和 body 上的配色变量。修改后请在实际使用的明暗模式下检查前景与背景的组合。

主题预览 ​

每组依次展示封面、章节、正文和引语页面。预览对应一组固定配置;实际效果还受明暗模式和已安装字体影响。

实时示例 ​

按贡献指南克隆并安装仓库后,在仓库根目录运行相应配色示例:

主题命令
经典蓝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。

主题实现和预览图重新生成方法请参阅 贡献指南。