Change site background colour with colour picker

Question

I'm using this colour picker for my site. What I need to do is to change background of my website body/html when selection is in progress. Just like it changes the background of textbox there.

I've looked at the JS file itself but found it a bit complex. I added document.body.style.background = styleElement.jscStyle.backgroundColor; between lines 410 - 430 but nothing changed.

How can I achieve it.

Thanks

Answer 1

In section 8 of the Demos page you have "Onchange event":

You need to create the input like this:

<input class="color"
    onchange="document.body.style.backgroundColor = '#'+this.color">

My guess is that in your example you have forgot to add # before the color HEX code.

Answer 2

Add a class ( .colorPicker ) to the color picker input field and then do this in jQuery:

'use strict';
$(document).ready(function(){
    $(".colorPicker").change(function(){
        $('body').css('background-color', $(this).css('background-color'));
    });
});