Below I paste a Quarto document which produces a reveal.js slide deck with 2 slides, using the default theme.
How do I change the color of the header and of the main text on a single slide, while keeping all other slides at the default theme? If possible, I would like the syntax to be relatively concise.
---
format: revealjs
---
## Slide 1: Black header (default)
Black text (default)
## Slide 2: Red header
Red text
CodePudding user response:
One option can be targeting that specific slide using id and then apply CSS rule for that id.
---
title: "Text Color for single Slide"
format: revealjs
engine: knitr
---
## Slide 1: Black header (default)
Black text (default)
## Slide 2: Red header{#color-slide}
```{css, echo=FALSE}
#color-slide,
#color-slide h2 {
color: red;
}
```
Red Text
## Slide 3: Black header (default)
Black text (default)
And using CSS class, instead of id, would be useful if we want to apply those same CSS rules on more than one slide.
---
title: "Text Color for single Slide"
format: revealjs
engine: knitr
---
## Slide 1: Black header (default)
Black text (default)
## Slide 2: Red header{.color-slide}
```{css, echo=FALSE}
.color-slide,
.color-slide h2 {
color: red;
}
```
Red Text
## Slide 3: Black header (default)
Black text (default)
## Slide 4: Red header{.color-slide}
Red Text