Pimp your Reveal.js presentations by randomising slide colours and typeface.
Add data-state="random-color"
in slide attributes. This slide font-family
, color
and background-color
will be randomised when it becomes active.
The default colors list is based on tachyons accessible combinations (contrast ratio > 7). Feel free to expand it 👍.
The default fonts list is based on macOS_ typefaces. Not because I hate other OSes but because it was my use case for a live presentations. Ides are welcome 😊.
$ npm install reveal-random-colors
import Reveal from 'reveal.js';
import RandomColors from 'reveal-random-colors';
Reveal.registerPlugin('RandomColors', RandomColors());
Reveal.initialize({
// ... cf. https://npmjs.com/reveal.js#configuration
});
In a Reveal.js slide:
<!-- .slide: data-state="random-color" -->
# My Slide Title
The following rules will help cascade the random font to headlines and paragraphs.
.reveal [data-state="random-color"] h1,
.reveal [data-state="random-color"] h2,
.reveal [data-state="random-color"] h3,
.reveal [data-state="random-color"] h4,
.reveal [data-state="random-color"] h5,
.reveal [data-state="random-color"] p {
font-family: inherit;
}
Specify an array of typefaces to the plugin via the fonts
option:
const myFonts = [
'Comic Sans',
'Ubuntu, sans-serif',
'Open Sans, sans-serif',
];
Reveal.registerPlugin('RandomColors', RandomColors({
fonts: myFonts
}));