Reveal Themes

Using Themes

There are 11 built-in themes provided for Reveal presentations (you can also create your own themes). The default and dark themes use fairly classic typography and color schemes and are a good place to start.

The default theme is used automatically — use the theme option to switch to an alternate theme. For example

---
title: "Presentation"
format:
  revealjs: 
    theme: dark
---

Here is the full list of available themes:

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

Customizing Themes

You can customize the built in themes by adding your own Sass theme file to the theme declaration. For example:

---
title: "Presentation"
format:
  revealjs: 
    theme: [default, custom.scss]
---

Here’s what the contents of custom.scss might look like:

/*-- 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;
}

Theme files use Saas (a variant of CSS that supports variables and other extended features) and are divided into sections.

  • /*-- scss:defaults --*/ is used to define variables that affect fonts, colors, borders, etc. (note that variables start with a $)

  • /*-- scss:rules --*/ is used to create CSS rules. Note that CSS rules that target Reveal content generally need to use the .reveal .slide prefix to successfully override the theme’s default styles.

See the Saas Variables documentation for a list of what’s available to customize.

Creating Themes

Creating a new theme is just a matter of re-defining one or more of the default Sass variables (you don’t need to re-specify values that you don’t want to override) and adding any additional CSS rules you need to.

See the Saas Variables documentation for a list of what can be customized within a theme.

For example, here is the source code for the built in serif theme:

/*-- scss:defaults --*/

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

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

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

/*-- scss:rules --*/

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

In this theme file you’ll notice that the !default suffix is placed after variable definitions. This is to make sure that anyone using this theme can override the variable value (without that the value is defined as not overrideable).

You can use a custom theme by just specifying it as the theme option (all theme files implicitly inherit from the default theme). For example:

---
title: "Presentation"
format:
  revealjs: 
    theme: mytheme.scss
---

Here is the source code for all of the built-in themes for inspiration and examples:

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

Saas Variables

Here’s a list of all Sass variables (and their default values) used by Reveal themes. Note that some variables are defined using other variables, and several of the color variables use the lighten() Sass function to create a lighter variant of another color.

Variable Default
$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
$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
$border-color lighten($body-color, 30%)
$border-width 1px
$border-radius 3px
$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-h1-text-shadow none
$presentation-heading-font-weight 600
$presentation-h1-font-size 2.5em
$presentation-h2-font-size 1.6em
$presentation-h3-font-size 1.3em
$presentation-h4-font-size 1em
$presentation-block-margin 12px
$presentation-slide-text-align left
$presentation-title-slide-text-align center
$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
$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

You’ll notice that some of the Sass variables use a presentation- prefix and some do not. The presentation- prefixed variables are specific to presentations, whereas the other variables are the same as ones used for standard Quarto HTML Themes.

Since all Quarto themes use the same Sass format, you can use a single theme file for both HTML / website documents and presentations.

Learning More

See these articles lo learn more about using Reveal:

  • Reveal Basics covers the basic mechanics of creating presentations.
  • Presenting Slides describes slide navigation, printing to PDF, drawing on slides using a chalkboard, and creating multiplex presentations.
  • Advanced Reveal delves into transitions, animations, advanced layout and positioning, and other options available for customizing presentations.