Modify Javascript Configuration Options for Theme Customizer Colour Picker

Question

I've started fully integrating the Wordpress Theme Customisation API into my Wordpress theme and it's phenomenal. One issue I've encountered is that including the default colour picker is great, but I am trying to determine how to change the configuration options for the Iris colour picker being used.

By default the colour picker in the Theme Customization pane has a colour palette beneath the picker and on the right hand side it has a lightness vertical bar. I would like to mimick the settings I am using on the front-end of my theme (using the Iris picker).

How would I go about changing the Theme Customization colour picker to use these settings? See below for the settings I am using for the front-end of my site for something completely different.

   $("#theme-color").wpColorPicker({
        border: false,
        controls: {
            horiz: 's', // horizontal defaults to saturation
            vert: 'l', // vertical defaults to lightness
            strip: 'h' // right strip defaults to hue
        },
        mode: 'hsl',
        palettes: false,
        width: 160,
        change: function(event, ui) {
            var selectedColor = ui.color.toString();

            $.removeCookie('spot_colour');

            // Set our cookie to last for 1 day
            $.cookie('spot_colour', selectedColor, { expires: 1, path: '/' });

            // Apply any selected colours
            applySpotColours();
        }
    });

Answer 1

The color picker thing is registered as a jQuery UI widget, so you could modify its prototype object before the widget is used in the page:

add_action('customize_controls_print_footer_scripts', function(){

  ?>
  <script>

    jQuery(document).ready(function($){

      $.wp.wpColorPicker.prototype.options = {

        border: false,
        // other options here...

      };         
    });   

  </script>
  <?php

}); 

(You should put that in your .js file)