Reveal 主题

使用主题

Reveal演示文稿提供了11种内置主题（您也可以创建自己的主题）。default和dark主题采用了相当经典的字体和配色方案，是不错的起点。

默认情况下会使用default主题——使用theme选项切换到其他主题。例如：

---
title: "演示文稿"
format:
  revealjs: 
    theme: dark
---

以下是所有可用主题的完整列表：

  • beige
  • blood
  • dark
  • default
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized

自定义主题

您可以通过在主题声明中添加您自己的 Sass 主题文件来自定义内置主题。例如：

---
title: "演示文稿"
format:
  revealjs: 
    theme: [default, custom.scss]
---

以下是 custom.scss 内容可能的样子：

/*-- scss:defaults --*/

$body-bg: #191919;
$body-color: #fff;
$link-color: #42affa;

/*-- scss:rules --*/

.reveal .slide blockquote {
  border-left: 3px solid $text-muted;
  padding-left: 0.5em;
}

主题文件使用 Sass（一种支持变量和其他扩展功能的 CSS 变体），并分为多个部分。

  • /*-- scss:defaults --*/ 用于定义影响字体、颜色、边框等的变量（注意变量以 $ 开头）

  • /*-- scss:rules --*/ 用于创建 CSS 规则。请注意，针对 Reveal 内容的 CSS 规则通常需要使用 .reveal .slide 前缀才能成功覆盖主题的默认样式。

有关可自定义内容的列表，请参阅 Sass 变量 文档。

创建主题

创建新主题只需重新定义一个或多个默认的 Sass 变量（您不需要重新指定不希望覆盖的值），并添加所需的任何其他 CSS 规则。

有关可以在主题中自定义的内容列表，请参阅 Sass 变量 文档。

例如，以下是内置 serif 主题的源代码：

/*-- scss:defaults --*/

// 字体
$font-family-sans-serif: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;

// 颜色
$body-bg: #f0f1eb !default;
$body-color: #000 !default;
$link-color: #51483d !default;
$selection-bg: #26351c !default;

// 标题
$presentation-heading-font: "Palatino Linotype", "Book Antiqua", Palatino,
  FreeSerif, serif !default;
$presentation-heading-color: #383d3d !default;

/*-- scss:rules --*/

.reveal a {
  line-height: 1.3em;
}

在此主题文件中，您会注意到在变量定义后放置了 !default 后缀。这是为了确保使用此主题的任何人都可以覆盖变量值（否则该值被定义为不可覆盖）。

您可以通过仅指定 theme 选项来使用自定义主题（所有主题文件隐式继承自 default 主题）。例如：

---
title: "演示文稿"
format:
  revealjs: 
    theme: mytheme.scss
---

以下是所有内置主题的源代码，供您参考和示例：

https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/revealjs/themes

Sass 变量

以下是 Reveal 主题使用的所有 Sass 变量（及其默认值）的列表。请注意，某些变量使用其他变量定义，并且几个颜色变量使用 lighten() Sass 函数创建另一种颜色的浅色变体。

颜色

变量 默认值
$body-bg #fff
$body-color #222
$text-muted lighten($body-color, 50%)
$link-color #2a76dd
$link-color-hover lighten($link-color, 15%)
$selection-bg lighten($link-color, 25%)
$selection-color $body-bg
$light-bg-text-color #222
$light-bg-link-color #2a76dd
$light-bg-code-color #4758ab
$dark-bg-text-color #fff
$dark-bg-link-color #42affa
$dark-bg-code-color #ffa07a

字体

变量 默认值
$font-family-sans-serif “Source Sans Pro”, Helvetica, sans-serif
$font-family-monospace monospace
$presentation-font-size-root 40px
$presentation-font-smaller 0.7
$presentation-line-height 1.3
变量 默认值
—————————————- ——————————————
$presentation-h1-font-size 2.5em
$presentation-h2-font-size 1.6em
$presentation-h3-font-size 1.3em
$presentation-h4-font-size 1em
$presentation-heading-font $font-family-sans-serif
$presentation-heading-color $body-color
$presentation-heading-line-height 1.2
$presentation-heading-letter-spacing normal
$presentation-heading-text-transform none
$presentation-heading-text-shadow none
$presentation-heading-font-weight 600
$presentation-h1-text-shadow none

代码块

变量 默认值
$code-block-bg $body-bg
$code-block-border-color lighten($body-color, 60%)
$code-block-font-size 0.55em

行内代码

变量 默认值
$code-color var(–quarto-hl-fu-color)
$code-bg transparent

选项卡集

变量 默认值
$tabset-border-color $code-block-border-color

布局

变量 默认值
$border-color lighten($body-color, 30%)
$border-width 1px
$border-radius 3px
$presentation-block-margin 12px
$presentation-slide-text-align left
$presentation-title-slide-text-align center

你会注意到一些Sass变量使用了presentation-前缀，而有些则没有。带有presentation-前缀的变量是专门用于演示的，而其他变量与标准Quarto HTML主题中使用的变量相同。

由于所有Quarto主题使用相同的Sass格式，你可以为HTML/网站文档和演示使用单一的主题文件。

了解更多

参见以下文章以了解更多关于使用Reveal的信息：

  • Reveal基础 涵盖了创建演示文稿的基本机制。
  • 演示幻灯片 描述了幻灯片导航、打印为PDF、使用黑板在幻灯片上绘图以及创建多路演示。
  • 高级Reveal 深入探讨了过渡、动画、高级布局和定位，以及其他可用于自定义演示的选项。