Search code examples
rreveal.jsquarto

Quarto Reveal slides: text color for a single slide


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

Solution

  • 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)
    
    

    overview of slides - css applied using id


    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
    

    overview of slides - css applied using class