Skip to content

Instantly share code, notes, and snippets.

@jbrown123
Last active May 5, 2024 21:00
Show Gist options
  • 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});
} );
@pelson
Copy link

pelson commented Jun 10, 2015

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

@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