Reveal.js - per-slide theme override using data-theme attribute

reveal per-slide theme override.js

// 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});
 
} );

Do you know if this still works? How do you specify the theme's path etc.? Any chance of an example? Thanks!

I don't see the configure({theme: ...}) as an option to reveal. I therefore followed the hacky approach of changing the theme url per slide. Something like:

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 = document.getElementById('theme').getAttribute('href') ;

    // 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) {
        console.log(event.currentSlide.dataset.theme);
document.getElementById('theme').setAttribute('href','css/theme/' + event.currentSlide.dataset.theme + '.css')
        // 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) {
document.getElementById('theme').setAttribute('href', SlideChangedHandler.defaultTheme)
    }

}


Reveal.addEventListener('slidechanged',  SlideChangedHandler);
Reveal.addEventListener( 'ready', SlideChangedHandler);

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