rreveal.jsquarto

Change slide background using CSS with Quarto/reveal.js


I am writing a .scss file to theme a reveal.js slide deck using quarto, and can't figure out how to set the background for a class of slides.

I would like to create a slide class with (say) a red background that I can apply with (eg) ## Slide title {.redslide}

At the moment my .scss file includes:

.redslide {
  background-color: red;
}

Which changes background for the div that has the slide contents to red, but not the whole background.

I can change the background slide-by-slide with (eg)

## Slide title {data-background-color=red}

which changes the background for the whole slide and also appropriately changes the text colour to white, but trying to set data-background-color in the css file doesn't work.

Is it possible to set the slide background using CSS, or is there a better way to achieve this using quarto/reveal.js?


Solution

  • The key is to add !important, then the those two approaches deliver the same result for me.

    .qmd

    title: "Title Slide"
    format: 
       revealjs:
         theme: [style.scss]
    ---
    
    
    
    ## Slide {background-color="#447099"}
    
    
    ## Slide Background {.test-background}
    

    styles.scss

    /*-- scss:defaults --*/
    
    
    .test-background {
        background-color: #447099 !important;
    }