Create custom theme

Added in version 2.1.0.

Changed in version 3.2.0.

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

Example 1: Using sphinx_revealjs.ext.sass (recommended)

extensions = [
    # .. Your extensions
    # Add
    "sphinx_revealjs.ext.sass",
]

revealjs_style_theme = "custom.css"

revealjs_sass_src_dir = "_sass"
revealjs_sass_out_dir = "_static"
revealjs_sass_auto_targets = True

When you build document with /_sass/custom.scss, it compile SCSS to CSS and you can use _static/custom.css as theme style of presentation.

Old examples

Removed in version 3.2.0: This does not works since Reveal.js v5.2.0.

Example 1: Using libsass

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

pip install libsass

Write SCSS source for your theme.

// Use template 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(
    string=source,
    include_paths=[str(get_revealjs_path() / "css/theme")]
)
Path("_static/custom.css").write_text(css)

Use compiled CSS as your theme.

# conf.py
# 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=https://github.com/attakei-lab/sphinxcontrib-sass/releases sphinxcontrib-sass

# conf.py
from sphinx_revealjs.utils import get_revealjs_path

extensions = [
    # .. Your extensions
    # Add
    "sphinxcontrib.sass",
]

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.