// .revealjs-background-color
// Demonstration of background color features of both reveal.js and what can be done with CSS.
// :include: //div[@class="slides"]
// :header_footer:
= Colorful Presentation
:backend: revealjs
:customcss: background-color.css
:topic: state=title
:icons: font

// classic
[background-color="yellow"]
== Hello

// New: with roles backed by CSS (see background-color.css)
[.red.background]
== Here

Red

[.green]
== We

Green

NOTE: Green background color shouldn't be applied to the whole slide

[.blue.canvas]
== Go

Blue

// role that alter style but not slide color
[.topic]
== Default color

but fancy font

// style role *and* color role (using shorthand markup)
// could also be written in long form like this:
// [role="topic red background"]
[.topic.red.background]
== fancy font

and color!