How to add Color Schemes to your WordPress theme with live preview: full working sample

color-scheme-preview.js

(function($) {
    var style = $('#yourtheme-color-scheme-css'),
        api = wp.customize;

    if (!style.length) {
        style = $('head').append('<style type="text/css" id="yourtheme-color-scheme-css" />')
            .find('#yourtheme-color-scheme-css');
    }
    // Color Scheme CSS.
    api.bind('preview-ready', function() {
        api.preview.bind('update-color-scheme-css', function(css) {
            style.html(css);
        });
    });
})(jQuery);

color-scheme.js

(function(api) {
    var cssTemplate = wp.template('yourtheme-color-scheme'),
        colorSettings = [
            'link_color',
            'button_background_color',
            'button_hover_background_color',
            'section_dark_background_color',
            'footer_background_color',
            'highlight_color'
        ];

    // Update list of colors when select a color scheme.
    function updateColors(scheme) {
        scheme = scheme || 'default';
        var colors = YourThemeColorScheme[scheme].colors;
        _.each(colorSettings, function(key, index) {
            var color = colors[index];
            api(key).set(color);
            api.control(key).container.find('.color-picker-hex')
                .data('data-default-color', color)
                .wpColorPicker('defaultColor', color);
        });
    }
    api.controlConstructor.select = api.Control.extend({
        ready: function() {
            if ('color_scheme' === this.id) {
                this.setting.bind('change', updateColors);
            }
        }
    });

    // Update the CSS whenever a color setting is changed.
    function updateCSS() {
        var scheme = api('color_scheme')(),
            css,
            colors = _.object(colorSettings, YourThemeColorScheme[scheme].colors);

        _.each(colorSettings, function(setting) {
            colors[setting] = api(setting)();
        });

        css = cssTemplate(colors);
        api.previewer.send('update-color-scheme-css', css);
    }
    _.each(colorSettings, function(setting) {
        api(setting, function(setting) {
            setting.bind(updateCSS);
        });
    });
})(wp.customize);

color-scheme.php

<?php
/**
 * Color Scheme Class: Create color schemes for your theme,
 * 		and give user the ability to change colors using live preview via custozimer.
 * 		
 * @author  Henry Chow
 * @link https://deluxeblogtips.com/add-color-schemes-wordpress-theme/
 *
 * Note: This is just a working sample of the color scheme provided by the author all in one place , To understand how this works, Please follow
 *  	the original tutorial found at the link above. 
 *  	
 * Setup: 
 * 1. add your css in the get_css function. 
 * 2. add your color schemes get_color_schemes() function
 * 3. Rename 'YourTheme_Color_Scheme' class to your prefered name.
 * 4. in your functions.php - add the following code to include the new file. 
 * 
 * 		require get_template_directory() . '/color-scheme.php';
 *		new YourTheme_Color_Scheme;
 * 5. Rename 'yourtheme-style-name' for wp_add_inline_style to your theme's style sheet handle.	
 * 
 * Note: This is not necessary, you could just call the class in your functions.php file to get the color schemes working.
 * 6. Rename all instances of 'yourtheme' from color-scheme.php, color-scheme.js, and color-sheme-preview.js
 * 7. Rename all instances of 'YourThemeColorScheme' from color-scheme.php and color-scheme.js
 */
class YourTheme_Color_Scheme {
	
	public function __construct() {    
        add_action( 'customize_register', array( $this, 'customizer_register' ) );
        add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_js' ) );
        add_action( 'customize_controls_print_footer_scripts', array( $this, 'color_scheme_template' ) );
        add_action( 'customize_preview_init', array( $this, 'customize_preview_js' ) );
        add_action( 'wp_enqueue_scripts', array( $this, 'output_css' ) );
    }

    public function customizer_register( WP_Customize_Manager $wp_customize ) {

    	$wp_customize->add_section( 'colors', array(
		    'title' => __( 'Colors', 'yourtheme-textdomain' ),
		) );

    	$wp_customize->add_setting( 'color_scheme', array(
		    'default' => 'default',
		    'transport' => 'postMessage',
		) );
		$color_schemes = $this->get_color_schemes();
		$choices = array();
		foreach ( $color_schemes as $color_scheme => $value ) {
		    $choices[$color_scheme] = $value['label'];
		}
		$wp_customize->add_control( 'color_scheme', array(
		    'label'   => __( 'Color scheme', 'yourtheme-textdomain' ),
		    'section' => 'colors',
		    'type'    => 'select',
		    'choices' => $choices,
		) );

		$options = array(
	    	'link_color' => __( 'Link color', 'yourtheme-textdomain' ),
		    'button_background_color' => __( 'Button background color', 'yourtheme-textdomain' ),
		    'button_hover_background_color' => __( 'Button hover background color', 'yourtheme-textdomain' ),
		    'section_dark_background_color' => __( 'Section dark background color', 'yourtheme-textdomain' ),
		    'footer_background_color' => __( 'Footer background color', 'yourtheme-textdomain' ),
		    'highlight_color' => __( 'Hightlight color', 'yourtheme-textdomain' ),
		);

		foreach ( $options as $key => $label ) {
		    $wp_customize->add_setting( $key, array(
		        'sanitize_callback' => 'sanitize_hex_color',
		        'transport' => 'postMessage',
		    ) );
		    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, $key, array(
		        'label' => $label,
		        'section' => 'colors',
		        'setting' => $key,
		    ) ) );
		}

    }

    public $options = array(
	    'link_color',
	    'button_background_color',
	    'button_hover_background_color',
	    'section_dark_background_color',
	    'footer_background_color',
	    'highlight_color',
	);

	public function get_css( $colors ) {

	$css = '
		/*#f7c651*/
		.main-navigation #primary-menu.menu li ul li.current-menu-item,
		.main-navigation ul ul li:hover > a, 
		.main-navigation ul ul li.focus > a,
		.main-navigation ul ul a:hover,
		.main-navigation ul ul li.current_page_item > a,
		#nav-icon span,
		input[type="submit"],
		.counter-area .title h2:after,
		.entry-content a:hover,
		.entry-footer a,
		.nav-links a ,
		.footer-area-bottom, 
		h2.widget-title:after,
		.section.cta,
		.title h2:after {
			background-color: %1$s;
		}

		.main-navigation li:hover > a,
		.main-navigation li.focus > a,
		li:hover.menu-item-has-children:after,
		.main-navigation li.current_page_ancestor a, 
		.main-navigation .current_menu_ancestor a ,
		a:hover,
		input[type="submit"]:hover,
		.footer-area-top .contact-name,
		.footer-area-top .widget-resources a,
		.footer-area-top .contacts li i,
		.blog-block:hover .blog-desc h4 a,
		.widget ul li a:hover  {
			color: %1$s; 
		}


		.main-navigation ul ul a,
		.widget_search .search-form input[type="search"],
		.main-navigation ul ul a:hover ,
		.main-navigation li.current_page_ancestor ul a,
		.main-navigation ul ul li.current_page_item > a ,
		.counter-area .title h2,
		.breadcrumb-title,
		.counter-number, .counter-prefix, 
		.counter-description,
		.cta-block h2, .cta-block p,
		.dtl a ,
		.footer-area-top .footer-box,
		.footer-area-bottom{
			color: %2$s;
		}

		.main-navigation .menu-cta-button a:hover,
		#drop::before,#drop::after,
		input[type="submit"]:hover,
		.cta .dtl a:hover {
			background-color: %3$s;
		}
		//rest of the css
		';

	    // More CSS
	    return vsprintf( $css, $colors );
	}


    
	public function customize_js() {
	   wp_enqueue_script( 'yourtheme-color-scheme', get_template_directory_uri() . '/js/color-scheme.js', array( 'customize-controls', 'iris', 'underscore', 'wp-util' ), '', true );
	   wp_localize_script( 'yourtheme-color-scheme', 'YourThemeColorScheme', $this->get_color_schemes() );
	}
	    
    public function color_scheme_template() {
	    $colors = array(
	        'link_color'                    => '{{ data.link_color }}',
	        'button_background_color'       => '{{ data.button_background_color }}',
	        'button_hover_background_color' => '{{ data.button_hover_background_color }}',
	        'section_dark_background_color' => '{{ data.section_dark_background_color }}',
	        'footer_background_color'       => '{{ data.footer_background_color }}',
	        'highlight_color'               => '{{ data.highlight_color }}',
	    );
	    ?>
	    <script type="text/html" id="tmpl-yourtheme-color-scheme">
	        <?php echo $this->get_css( $colors ); ?>
	    </script>
	<?php
    }
    public function customize_preview_js() {
   		wp_enqueue_script( 'yourtheme-color-scheme-preview', get_template_directory_uri() . '/js/color-scheme-preview.js', array( 'customize-preview' ), '', true );

    }
    
    public function output_css() {
		$colors = $this->get_color_scheme();
		    if ( $this->is_custom ) {
		        wp_add_inline_style( 'yourtheme-style-name', $this->get_css( $colors ) );
	    }
    }

    public $is_custom = false;
	public function get_color_scheme() {
	    $color_schemes = $this->get_color_schemes();
	    $color_scheme  = get_theme_mod( 'color_scheme' );
	    $color_scheme  = isset( $color_schemes[$color_scheme] ) ? $color_scheme : 'default';

	    if ( 'default' != $color_scheme ) {
	        $this->is_custom = true;
	    }

	    $colors = array_map( 'strtolower', $color_schemes[$color_scheme]['colors'] );

	    foreach ( $this->options as $k => $option ) {
	        $color = get_theme_mod( $option );
	        if ( $color && strtolower( $color ) != $colors[$k] ) {
	            $colors[$k] = $color;
	        }
	    }
	    return $colors;
	}

	public function get_color_schemes() {
	    return array(
	        'default' => array(
	            'label'  => __( 'Default', 'yourtheme-textdomain' ),
	            'colors' => array(
	                '#f7c651',
	                '#fff',
	                '#000',
	                '#2c383f',
	                '#222b30',
	                '#e67e22',
	            ),
	        ),
	        'pink' => array(
	            'label'  => __( 'Pink', 'yourtheme-textdomain' ),
	            'colors' => array(
	                '#d11241',
	                '#ededed',
	                '#002d62',
	                '#aa6600',
	                '#9d5f00',
	                '#dd8500',
	            ),
	        ),
	        'green' => array(
	            'label'  => __( 'Green', 'yourtheme-textdomain' ),
	            'colors' => array(
	                '#22bd3c',
	                '#ededed',
	                '#002d62',
	                '#aa6600',
	                '#9d5f00',
	                '#dd8500',
	            ),
	        ),
	        // Other color schemes
	    );
	}
}