Add default color pallets to ACF Color Picker

When working with color pickers, it’s important to provide an undo option for the user to revert back to where they came from when they don’t like the option they have chosen.

Same thing with ACF color picker field. I wish ACF would come with the option to let users to be able to undo their selection.

For now, we need to manually add the default color pallets ourselves in order to provide options for users to revert back their color selection.

First thing first, we need to enqueue a custom javascript/jquery script file that hooks into the ACF fields.

function vannkorn_admin_enqueue_scripts() 
    wp_enqueue_script( 'bts-acf-js', get_template_directory_uri() . '/assets/js/default-color.js', array(), '1.0.0', true );
}

add_action( 'acf/input/admin_enqueue_scripts', 'vannkorn_admin_enqueue_scripts' );

Then on the default-color.js file, write the following scripts, update the color options upon your need.

jQuery(document).ready( function($) {
    acf.add_filter( 'color_picker_args', function( args, $field ){
        args.palettes = ['#3742FA', '#5352ED', '#2ED573', '#E6F2EF', '#FF6348', '#DC3F24', '#6E7673', '#6C6C6C', '#F8F8F8', '#fafafa']
        return args;
    });
});

That’s it. Check your color picker, you should see the default color pallets available down below that main color picker window.