How do I change the background color of the toc slide in revealjs?

[luifrancgom]

Description

I want to change the background color of the toc slide. I tried the following:

---
title: "Untitled"
format: 
  revealjs:
    toc: true
    theme: [styles.scss]
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

## Bullets

When you click the **Render** button a document will be generated that includes:

-   Content authored with markdown
-   Output from executable code

## Code

When you click the **Render** button a presentation will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

Where the styles.scss is:

/*-- scss:defaults --*/
$pantone-7406c: #fdc600;

/*-- scss:rules --*/
.reveal .slide {
  background-color: $pantone-7406c;
}

I get the following result for the different slides, except for the title slide where I know how to change it, as expected:

But not for the toc slide where it fails:

I really don't understand why? I don't understand what I am missing. I check and I only can identify the following sections to change the background color:

<section id="quarto" class="slide level2 has-light-background future" style="display: block;" hidden="" aria-hidden="true">
</section>
<section id="bullets" class="slide level2 has-light-background future" style="display: block;" hidden="" aria-hidden="true">
</section>

[mcanouil]

Accessibility: To improve accessibility, please add alternative text to your screenshots. This helps all users, including those using screen readers, to understand the context of the images. A brief description can make a big difference! See Good Alt Text, Bad Alt Text — Making Your Content Perceivable.

[luifrancgom]

Sorry. I will do that.

[mcanouil]

When you want to tweak CSS, you need to use your favourite browser inspect/developer mode to investigate the structure of your HTML, then you'll see that the background is controlled by .slide-background not .slide.

Note also that you can go through the documentation on theming Reveal.js slide and find $body-bg which controls the background color: https://quarto.org/docs/presentations/revealjs/themes.html

[luifrancgom]

Thank you Mickaël Canouil for your help.