Change slide background using CSS with Quarto/reveal.js-CodePudding

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?

CodePudding user response：

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;
}