Styling and Themes

Relevant source files

• css/reveal.scss

Purpose and Scope

This page provides an overview of reveal.js's styling architecture, including the core CSS structure, theming system, and how visual presentation is managed. It covers the organization of stylesheets, CSS custom properties, transition effects, and the theme compilation workflow.

For detailed information about:

• CSS structure and organization, see CSS Architecture
• Transition types and fragment animations, see Transitions and Effects
• Built-in theme options, see Available Themes
• Creating your own themes, see Creating Custom Themes
• Print/PDF styling, see Print and PDF Export

For runtime background management and parallax effects, see Backgrounds Controller.

---

CSS File Organization

Reveal.js uses Sass (SCSS) as its CSS preprocessor. The core stylesheet is reveal.scss, which contains all base presentation styling compiled into dist/reveal.css during the build process.

Core Stylesheet Structure

The main css/reveal.scss file is organized into distinct functional sections:

Sources: css/reveal.scss1-2233

CSS Section Breakdown

The reveal.scss file contains the following major sections:

Section	Lines	Purpose
Global Styles	16-56	Viewport, fullscreen, base layout
Fragments	63-223	Fragment visibility and animations
Controls	249-518	Navigation arrow styling and positioning
Progress Bar	574-603	Horizontal progress indicator
Slide Number	609-629	Slide counter display
Slides Container	635-752	Core slide positioning and display
Transitions	758-1067	Slide transition effects (slide, convex, concave, zoom, fade)
Pause Overlay	1073-1107	Black screen pause mode
Backgrounds	1129-1298	Per-slide background rendering
Auto-Animate	1310-1320	Unmatched element handling
Overview Mode	1327-1392	Grid view styling
Overlay System	1445-1673	Help dialog and preview overlays
Code Highlighting	1698-1740	Syntax highlighting integration
Scroll View	1995-2223	Continuous scroll mode
Print Styles	2230-2231	PDF/print output

Sources: css/reveal.scss1-2233

---

Styling Layers

Reveal.js applies styles in a layered architecture, where each layer builds upon the previous:

Sources: css/reveal.scss16-41 css/reveal.scss635-752

---

CSS Custom Properties

Reveal.js uses CSS custom properties (CSS variables) prefixed with --r- for dynamic theming and responsive behavior:

Core Layout Variables

--r-controls-spacing          Navigation arrow spacing
--r-overlay-header-height     Overlay header size
--r-overlay-margin            Overlay outer margin
--r-overlay-padding           Overlay inner padding
--r-overlay-gap               Overlay element gap

Sources: css/reveal.scss35-40

Scroll View Variables

--r-scrollbar-width           Custom scrollbar width
--r-scrollbar-trigger-size    Fragment trigger size in scrollbar
--page-height                 Scroll page container height
--page-scroll-padding         Spacing between scroll pages
--slide-width                 Slide content width
--slide-height                Slide content height
--slide-scale                 Slide scaling factor

Sources: css/reveal.scss2007-2089

Color Variables

--r-link-color                Primary link color (used in outline)
--r-overlay-element-bg-color  Scrollbar background RGB values
--r-overlay-element-fg-color  Scrollbar foreground RGB values

Sources: css/reveal.scss1346 css/reveal.scss2117-2126

Dynamic Viewport Height

Reveal.js handles viewport height across different browsers using a fallback cascade:

Sources: css/reveal.scss18-21

---

Fragment Animation System

Fragments use a combination of opacity, visibility, and transform properties to create step-by-step reveals. All fragment animations have a base transition duration of 0.2s.

Fragment States

Class	Opacity	Visibility	Notes
.fragment	0	hidden	Initial state
.fragment.visible	1	inherit	Revealed state
.fragment.current-fragment	1	inherit	Currently active
.fragment.disabled	varies	varies	Transitions disabled

Sources: css/reveal.scss63-223

---

Transition System

Reveal.js provides multiple transition types through Sass mixins that generate CSS for horizontal and vertical navigation:

Transition Implementation

Each transition type is applied through attribute selectors that check data-transition or the global .reveal class:

.reveal .slides section[data-transition=zoom]
.reveal.zoom .slides section:not([data-transition])

Sources: css/reveal.scss758-799 css/reveal.scss805-1067

---

Control Elements

The presentation includes several UI control elements styled in reveal.scss:

Navigation Controls

Arrow-based navigation controls with hover/active states:

• Base size: 3.6em ($controlArrowSize)
• Arrow length: 2.6em ($controlArrowLength)
• Arrow thickness: 0.5em ($controlArrowThickness)
• Angles: 45° (normal), 40° (hover), 36° (active)

Controls invert color based on slide background contrast detection.

Sources: css/reveal.scss267-518

Progress Bar

A horizontal bar at the bottom showing presentation progress:

• Height: 3px
• Transform: scaleX(0) to scaleX(1) with cubic-bezier easing
• Background: rgba(0, 0, 0, 0.2) with configurable foreground color

Sources: css/reveal.scss574-603

Slide Number

Position indicator in bottom-right corner:

• Font: 12px Helvetica
• Background: rgba(0, 0, 0, 0.4)
• Z-index: 31 (above slides)

Sources: css/reveal.scss609-629

---

View Mode Styling

Each view mode applies distinct CSS that fundamentally changes presentation layout:

Overview Mode (.reveal.overview)

• All slides visible with opacity: 1 !important
• Grid layout with 3D perspective
• 10px outline on hover and present slide
• Fragments always visible
• Transitions disabled

Sources: css/reveal.scss1327-1392

Scroll View (.reveal-viewport.reveal-scroll)

• Slides restructured into .scroll-page containers
• Custom scrollbar implementation with playhead
• Controls, progress, backgrounds hidden
• position: sticky for smooth scrolling
• Touch action: manipulation

Sources: css/reveal.scss1995-2223

Paused State (.reveal.paused)

• Black overlay with opacity: 1 and visibility: visible
• Resume button in bottom-right
• Z-index: 100 (above all content)

Sources: css/reveal.scss1073-1107

---

Background System

Per-slide backgrounds are rendered in a separate .backgrounds container that sits behind .slides:

Backgrounds support:

• Color (background-color)
• Image (background-position, background-size, background-repeat)
• Video (<video> with object-fit)
• Iframe embeds
• Independent transitions from slide content
• Parallax effects via transform on .backgrounds container

Sources: css/reveal.scss1129-1298 css/reveal.scss1428-1438

---

Overlay System

Reveal.js includes a unified overlay system for help dialogs and media previews:

Structure:

.r-overlay                    Full-screen overlay container
  .r-overlay-viewport         Content area with padding
    .r-overlay-header         Header with close/external buttons
    .r-overlay-content        Main content area

Styling features:

• Dark background: rgba(0, 0, 0, 0.95) with backdrop-filter: blur(10px)
• Animations: fade-in (opacity) and scale-up (transform)
• Responsive header height: 40px (desktop) / 26px (mobile)
• Z-index: 99

Sources: css/reveal.scss1445-1673

---

Theme System Overview

Themes in reveal.js are Sass files that:

1. Define CSS custom properties for colors, fonts, and spacing
2. Import base mixins from css/theme/template/mixins.scss
3. Compile to standalone CSS files in dist/theme/

Themes can override:

• Font families and sizes
• Color schemes (background, text, links, headings)
• Element spacing and sizing
• Code block styling
• Transition speeds

For detailed theme creation workflow, see Creating Custom Themes.

Sources: css/reveal.scss1-7 (header comments)

---

Responsive Behavior

Reveal.js adapts styling based on viewport size through media queries:

Breakpoints

Breakpoint	Target	Changes
max-width: 500px	Small phones	Controls spacing reduced to 0.8em
min-width: 500px	Tablets+	Edge-aligned controls layout available
max-width: 600px	Phones	Speaker notes take 40vh instead of 30vh
max-width: 1024px	Tablets	Overlay header height reduced to 26px
min-width: 1600px	Large displays	Speaker notes font size 20px

Touch Device Support

• Control arrows use -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
• No hover states on touch devices (.reveal.no-hover)
• Touch action properties for scroll prevention

Sources: css/reveal.scss42-46 css/reveal.scss520-567 css/reveal.scss1849-1887

---

Print and PDF Styling

Print styles are imported from separate files and apply when:

• The .print-pdf class is present on .reveal
• The page is being printed to paper

Print mode:

• Forces all backgrounds to opacity: 1 !important and visibility: visible !important
• Expands all fragments
• Removes transitions
• Applies page breaks between slides

For complete print/PDF workflow, see Print and PDF Export.

Sources: css/reveal.scss2230-2231 css/reveal.scss1171-1174

---

RTL (Right-to-Left) Support

The .reveal.rtl class applies:

• direction: rtl to slides and headings
• direction: ltr for code blocks (maintain code readability)
• text-align: right for lists
• transform-origin: 100% 0 for progress bar (right-to-left growth)

Sources: css/reveal.scss1399-1422

---

Build Integration

The CSS compilation workflow integrates with the Gulp build system:

1. Source: css/reveal.scss imports css/layout.scss
2. Compilation: Sass compiler processes SCSS to CSS
3. Post-processing: Autoprefixer adds vendor prefixes
4. Minification: CleanCSS produces optimized output
5. Output: dist/reveal.css and dist/reveal.min.css

Theme files follow the same pipeline independently.

For build system details, see Build System.

Sources: css/reveal.scss9-10 (import statement)