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

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:
define a class .inverse, and
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