Change background colors with smoothState.js

[ntot]

Hi, I posted this on Stackoverflow but no luck... I have a test site with 5 pages, each page has a different background colour depending on the page you are on.

When I use the default settings that come with smoothState.js, the background colour does not refresh as it's set to the body of the page, if I press F5 then yes I see that pages colour. Is it possible to get the background colours to change depending on the page you are on using smoothState.js?

smoothState.js options:

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 250, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },
    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        // Remove your CSS animation reversing class
        $container.removeClass('is-exiting');

        // Inject the new content
        $container.html($newContent);

      }
    }
  },
  smoothState = $('#main').smoothState(options).data('smoothState');
});

CSS:

.home{
  background-color: #000000;
}

.about{
  background-color: #efefef;
}

.faq{
  background-color: #999999;
}

.prices{
  background-color: #666666;
}

.contact{
  background-color: #333333;
}

[CHEWX]

Just put a div inside #main with your background colours on, then they will auto display. Not on the body.