Define a class of slides with inverse background in revealjs/Quarto

Question

I would like to have some of the slides inverse. Notably, I would like to have the level 1 slides (these with, by default <h1> level 1 headers) inverse colors: white on black, for example.

This can be achieved as follows:

1. define a class .inverse, and
2. specify the background color and the .inverse class in the header of the slide

For example, include this in the style.scss file associated with the presentation:

.inverse h1 {
   color: white;
 }

And use the following to make the slide inversed

# Level 1 header {.inverse background-color="black"}

This works. However, it requires a manual specification of background and class for each slide which I would like to be inversed. Is there a way of setting it up globally, such that the contents of the curly brackets are not necessary and all level 1 slides are inverted automatically?

Answer 1

You can use Pandoc Lua filters to use the inverse class and background-color="black" for all level 1 headers automatically.

MWE

---
title: "Level 1 header"
format: revealjs
keep-md: true
filters: [bg_style.lua]
---

```{css, include=FALSE}
.inverse h1 {
   color: white;
 }
```


## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

# Level 1 header

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

# Level 1 header

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

bg_style.lua

function Header(el)
    if el.level == 1 then
      table.insert(el.classes, "inverse")
      el.attributes["data-background-color"] = 'black'
      return el
    end
end