Themes

Revealer ships two built-in themes and can also use any stock reveal.js theme.

Theme

Description

revealer

Default. A neutral, sober look: grey/black headings with a discreet blue accent. Intended to be presentation-agnostic and easy to reuse.

ljp

Laboratoire Jean Perrin branding: dark-teal headings, blue sub-headings and matching links.

any reveal.js theme

black, white, league, … (see the reveal.js themes).

Select a theme in the settings part of a .pres file:

> theme: ljp

You can also switch theme for a single slide:

=== Interlude
> theme: black

This slide uses the `black` theme; the next slide returns to the presentation
theme automatically.

This swaps the theme stylesheet while the slide is active, so it works best for complete reveal.js themes (black, white, league, ljp, revealer, …). The switch is local to the current slide: navigating away restores the global theme selected in the settings block.

Customising

The built-in themes are intentionally thin. They @import a shared, theme-agnostic base stylesheet (_revealer-base.css) and then override a handful of CSS custom properties. To create your own theme, copy revealer.css, rename it, and tweak the variables:

@import url(_revealer-base.css);

:root {
  --rv-h1-color: #1a1a1a;       /* main heading colour */
  --rv-h2-color: #555;          /* sub-heading colour */
  --rv-header-bg: #f5f5f5;      /* fixed header / logo bar background */
  --rv-header-color: #222;      /* fixed header text colour */
  --r-link-color: #2a76dd;      /* links and accents */
  --rv-highlight-bg: #f0f0f5;   /* highlighted blocks */
}

The theme files live in src/revealer/data/themes/ and are copied into each presentation’s reveal.js/dist/theme/ folder at build time. Logos remain a per-presentation choice (> logo: in the .pres file) and are independent of the theme.

The header and footer band heights are not theme variables: they follow the theme’s default look, and can be overridden per presentation with > header-height: / > footer-height: (a fraction of the slide height). See Layout parameters.