Skip to content

Instantly share code, notes, and snippets.

@jbrown123
Last active May 11, 2019 05:01
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jbrown123/9445384733c9f289d6e8 to your computer and use it in GitHub Desktop.
Save jbrown123/9445384733c9f289d6e8 to your computer and use it in GitHub Desktop.
Reveal.js - per-slide theme override using data-theme attribute
// the code below can be added to the end of your Reveal slide deck to implement
// per slide theme setting via the data-theme attribute
// I put this in right below the call to Reveal.initialize()
// the code is smart enough to restore the previous default theme
// (or slide specific theme) as you move forward and backward
// it also takes into account vertical slide stacks with a data-theme
// attribute on the outer <section> tag and allows individual vertical
// slides to specify their own override
// this code is released into the public domain
// written by James Brown http://www.bldesign.com
// implement slide specific theme loading via data-theme
Reveal.addEventListener('slidechanged', function SlideChangedHandler (event) {
// console.log('slide change: '); console.log(event);
// event.previousSlide, event.currentSlide, event.indexh, event.indexv
// first time called, remember what the default theme is
if (!SlideChangedHandler.defaultTheme)
SlideChangedHandler.defaultTheme = Reveal.getConfig().theme;
// is this slide part of a verticle stack? check for parent theme override & apply to this slide
if (!event.currentSlide.dataset.theme && event.currentSlide.parentNode.nodeName == 'SECTION' && event.currentSlide.parentNode.dataset.theme)
event.currentSlide.dataset.theme = event.currentSlide.parentNode.dataset.theme;
// if this slide has a data-theme attribute, set it as the theme
if (event.currentSlide.dataset.theme)
Reveal.configure({ theme: event.currentSlide.dataset.theme });
// if the previous slide had a custom theme and this slide does not (hence the else), reset the theme
else if (event.previousSlide && event.previousSlide.dataset.theme)
Reveal.configure({ theme: SlideChangedHandler.defaultTheme});
} );
@hacknug
Copy link

hacknug commented Jan 17, 2016

Just in case someone else gets here, it was removed with version 3.0: hakimel/reveal.js#1061

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment