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

Callouts

Variable	Notes
$callout-border-width	The left border width of callouts. Defaults to 0.3rem.
$callout-border-scale	The border color of callouts computed by shifting the callout color by this amount. Defaults to 0%.
$callout-icon-scale	The color of the callout icon computed by shifting the callout color by this amount. Defaults to 10%.
$callout-margin-top	The amount of top margin on the callout. Defaults to 1rem.
$callout-margin-bottom	The amount of bottom margin on the callout. Defaults to 1rem.
$callout-color-<type>	The colors for the various types of callouts. Defaults: type default note #0d6efd tip #198754 caution #dc3545 warning #fd7e14 important #ffc107 Note that style for callout is to have left border using type color, and header background to use a variation of this color.

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.
• More About Quarto Themes describes the layering system in more detail, including interactions with other SCSS files and _brand.yml.