用途:该技能面向 Slidev 演示文稿的主题使用与定制,帮助选择主题、配置主题选项,并创建自定义主题,使幻灯片获得统一的样式、布局与组件。
主要能力:
- 应用主题:在首张幻灯片 frontmatter 中设置 theme,官方主题用短名(如 seriph、default),NPM 包用全名(如 slidev-theme-custom),本地主题用路径(如 ./my-theme)。Slidev 会自动提示安装缺失主题,也可手动执行 npm install slidev-theme-seriph。
- 官方主题:default(简洁极简,支持明暗模式)、seriph(衬线字体,优雅专业)、apple-basic(Apple 主题风格)、bricks(色彩鲜明,适合创意内容)、shibainu。社区主题包括 penguin、purplin、geist、dracula、eloc 等。
- 主题配置:通过 themeConfig 传入颜色(primary、secondary、tertiary、darkBg、lightBg 等)、字体、布局等选项,具体可用项取决于各主题文档。
- 颜色模式:colorSchema 可设为 auto(跟随系统)、light 或 dark。
- 弹出主题:执行 slidev theme eject 将主题源码复制到项目本地,便于修改布局、组件与样式,之后用 theme: ./theme 引用。
- 创建自定义主题:主题目录包含 package.json、layouts、components、styles、setup;package.json 需含 slidev-theme 关键词、engines.slidev 版本、slidev 字段(colorSchema、highlighter、fonts)。布局为 Vue 组件,使用 slidev-layout 类名;样式通过 CSS 变量定义;组件可接收 props;主题可通过 useSlideContext 读取 themeConfigs,并在 setup/main.ts 中提供默认配置。
- 发布:npm publish 发布到 NPM,并向 Slidev 主题画廊仓库提交 PR。
使用方式:在幻灯片 frontmatter 中声明 theme、colorSchema 与 themeConfig;需要深度定制时先 eject 再修改本地文件。
适用场景:为技术分享、演讲或课程制作风格统一的 Slidev 幻灯片,或开发并分发自己的主题。
限制:各主题支持的 themeConfig 选项不同,需查阅对应主题文档;自定义主题需遵循 Slidev 版本与结构约定;资料未提供具体价格、平台支持范围或效果保证。