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 Sass (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 Sass 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 Sass 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

Sass 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.

Colors

Variable Default
$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

Fonts

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

Headings

Variable Default
$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 Blocks

Variable Default
$code-block-bg $body-bg
$code-block-border-color lighten($body-color, 60%)
$code-block-font-size 0.55em

Inline Code

Variable Default
$code-color var(–quarto-hl-fu-color)
$code-bg transparent

Tabsets

Variable Default
$tabset-border-color $code-block-border-color

Layout

Variable Default
$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

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 to 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.