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?
The key is to add !important
, then the those two approaches deliver the same result for me.
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;
}