xarxaprod-wp-theme/inc/customizer.php

<?php
/**
 * Xarxaprod theme Theme Customizer
 *
 * @package Xarxaprod_theme
 */

/**
 * Add postMessage support for site title and description for the Theme Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Theme Customizer object.
 */
function xarxaprod_customize_register( $wp_customize ) {
	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';

	if ( isset( $wp_customize->selective_refresh ) ) {
		$wp_customize->selective_refresh->add_partial(
			'blogname',
			array(
				'selector'        => '.site-title a',
				'render_callback' => 'xarxaprod_customize_partial_blogname',
			)
		);
		$wp_customize->selective_refresh->add_partial(
			'blogdescription',
			array(
				'selector'        => '.site-description',
				'render_callback' => 'xarxaprod_customize_partial_blogdescription',
			)
		);
	}
}
add_action( 'customize_register', 'xarxaprod_customize_register' );

/**
 * Render the site title for the selective refresh partial.
 *
 * @return void
 */
function xarxaprod_customize_partial_blogname() {
	bloginfo( 'name' );
}

/**
 * Render the site tagline for the selective refresh partial.
 *
 * @return void
 */
function xarxaprod_customize_partial_blogdescription() {
	bloginfo( 'description' );
}


/**
 * https://diveinwp.com/add-wordpress-customizer-color-picker-palette/
 */

function fons_customizer_add_colorPicker( $wp_customize){

    // Add New Section: Fons Colors

    $wp_customize->add_section( 'fons_color_section', array(
                     'title' => 'Fons Colors',
                     'description' => 'Set Colors For Background',
                     'priority' => '40'
    ));

    // Add Settings
    $wp_customize->add_setting( 'fons_bubble01_color', array(
		'default' => 'var(--bubble-color-01)',
    ));

    $wp_customize->add_setting( 'fons_bubble02_color', array(
		'default' => 'var(--bubble-color-02)',
    ));

    $wp_customize->add_setting( 'fons_bubble03_color', array(
		'default' => 'var(--bubble-color-03)',
    ));

    $wp_customize->add_setting( 'fons_bubble04_color', array(
		'default' => 'var(--bubble-color-04)',
    ));




    // Add Controls
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble01_color', array(
		'label' => 'Color 01',
		'section' => 'fons_color_section',
		'settings' => 'fons_bubble01_color'

    )));


    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble02_color', array(
		'label' => 'Color 02',
		'section' => 'fons_color_section',
		'settings' => 'fons_bubble02_color'

    )));


    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble03_color', array(
		'label' => 'Color 03',
		'section' => 'fons_color_section',
		'settings' => 'fons_bubble03_color'

    )));


    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'fons_bubble04_color', array(
		'label' => 'Color 04',
		'section' => 'fons_color_section',
		'settings' => 'fons_bubble04_color'

    )));


}

add_action( 'customize_register', 'fons_customizer_add_colorPicker' );
/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function xarxaprod_customize_preview_js() {
	wp_enqueue_script( 'xarxaprod-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), _S_VERSION, true );
}
add_action( 'customize_preview_init', 'xarxaprod_customize_preview_js' );