Create custom theme





sphinx-revealjs includes SCSS sources of bundled themes. You can write custom theme from theme template of reveal.js using libsass.

Example 1: Using libsass

First, install libsass to compile SASS/SCSS on your environment.

pip install libsass

Write SCSS source for your theme.

// Use teamplate sources from Reveal.js
@import "template/mixins";
@import "template/settings";

// Write your settings
$base03: #002b36;

// ...

@import "template/theme";

// You can write custom style too.
.reveal {
  h1, h2, h3 {
    text-transform: none;

Compile source.

from pathlib import Path

import sass
from sphinx_revealjs.utils import get_revealjs_path

source = Path("_sass/custom.scss").read_text()
css = sass.compile(
    include_paths=[str(get_revealjs_path() / "css/theme")]

Use compiled CSS as your theme.

# If option has extension, find from static files.
revealjs_style_theme = "custom.css"
revealjs_static_path = ["_static"]

Example 2: sphinxcontrib-sass

You can use sphinxcontrib-sass to simplify.

pip install --find-links= sphinxcontrib-sass
from sphinx_revealjs.utils import get_revealjs_path

extensions = [
    # .. Your extensions
    # Add

sass_src_dir = "_sass"
sass_out_dir = "_static"
sass_targets = {"custom.scss": "custom.css"}
sass_include_paths = [
    get_revealjs_path() / "css" / "theme",

When document updated, it compile scss to css.