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.







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.