Adjust Page Styles based on Current Slide

For this example, we'll change the background color of the page based on a "Custom Field" addition to each slide.

1. Edit one of your slide's, and then in the "General Slide Settings", add one of the following to the "Custom Fields" section:

2. Next, add some custom styles for "sr-light" or "sr-dark" (we'll preface the "data-color" value with "sr-" to help avoid CSS naming conflicts).

3. Finally, add the following Custom JavaScript:

This effectively adds either the "sr-light" or "sr-dark" class to the body element of the page.

And now since the custom class name is being added to the "body" element, this allows for many possibilities. Here's an example: