reveal.js background color choices

Question

I've been working with reveal.js a bit and you can change the background of individual slides with something referred to as the global state as seen here in the demo.

Are there other colors besides the ones mention (-soothe, -blackout and -alert) on this slide that can be applied (hit down key in the presentation to see the colors)? If so what colors?

Dorindadorine

Answer 1

You can do this to e.g. have a different background color for the final slide:

Declare a style for the background (given the class "the-end"):

  html.the-end .state-background {
    background-color: rgba(0,0,0, 0.8);
  }

Then have the final slide look like this:

<section data-state='the-end'>
  <h1>__END__</h1>
  <br>
  <h3>Thank you!</h3>
</section>

EDIT (added by tyler rinker) You are correct but I wanted to be more explicit for future searchers. I added the following two segments.

Added this to reveal.min.css

.orange .reveal .state-background{background:rgba(255,165,0,1)}

Added this to reveal.css

.orange .reveal .state-background {
    background: rgba( 255, 165, 0, 1 );
}

Latticed

Where do I declare the style? – Dorindadorine

Answer my own question in an edit to your answer. Thanks for the response. +1 and the check. – Dorindadorine

FYI I've added a few more color options in the default styles: github.com/hakimel/reveal.js/blob/master/css/reveal.css#L1242 – Elviselvish

Personally, I wouldn't add any presentation specific things to the library, I'd probably just add the styles inline in the presentation itself to start with. – Latticed