How to Change CSS Variable value in Theme Customizer Live Preview

Question

/**
 * Registers settings and controls with the Customizer.
 *
 * @param WP_Customize_Manager $wp_customize Customizer object.
 */
function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_setting(
        'primary_color',
        [
            'default'           => '#b3000e',
            'sanitize_callback' => 'sanitize_hex_color',
            'transport'         => 'postMessage',
        ]
    );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'primary_color',
            [
                'label'   => __( 'Primary Color', 'mytheme' ),
                'section' => 'mytheme_color_options',
            ]
        )
    );

}
add_action( 'customize_register', 'mytheme_customize_register' );


/**
 * This will output the custom WordPress settings to the live theme's WP head.
 *
 * Used by hook: 'wp_head'
 *
 * @see add_action('wp_head',$func)
 * @since MyTheme 1.0
 */
function mytheme_customizer_header_output() {

    ?>
    <style type="text/css">

        :root {
            --primary: <?php echo esc_attr( get_theme_mod( 'primary_color', '#b3000e' ) ); ?>;
        }

    </style>
    <?php

}
add_action( 'wp_head', 'mytheme_customizer_header_output' );

/**
 * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
 */
function mytheme_customize_preview_js() {

    wp_enqueue_script( 'mytheme-customizer-preview-script', get_stylesheet_directory_uri() . '/assets/js/customizer-preview.js', [ 'jquery', 'customize-preview' ], 1.0, true );

}
add_action( 'customize_preview_init', 'mytheme_customize_preview_js' );

customizer-preview.js code

 ( function( $ ) {

    wp.customize(
        'primary_color',
        function ( value ) {
            value.bind(
                function ( to ) {

                    //$( 'a' ).css( 'color', to );
                    $( ':root' ).css( '--primary', to );

                }
            );
        }
    );

} )( jQuery );

Answer 1

Quick Note:

It looks like you may want to use a Color Control instead of excluding type and getting the default text control.

For example, this will turn your text input into a color picker...

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'primary_color',
        [
            'label'   => __( 'Primary Color', 'mytheme' ),
            'section' => 'mytheme_color_options',
            'type' => 'color'
        ]
    )
);

You don't give many details about your problem, what errors your getting or what your trying to achieve. Or why you are using a Custom Property Variable?

Anyway, I don't think you can use jQuery to access the variable that way. Try this...

( function( $ ) {
    wp.customize(
        'primary_color',
        function ( value ) {
            value.bind(
                function ( to ) {
                    document.body.style.setProperty('--primary', to);
                }
            );
        }
    );
} )( jQuery );

Update:

jQuery only supports CSS custom properties in version 3.2.0 and later. There is no support for them in 2.x or earlier, so accessing them with .css() will not work in those versions.