Color picker meta that adds inline css variable using ACF color palette

application-blocks-editor.js

// Only run if ACF is active.
if (typeof acf !== 'undefined') {
	acf.add_filter('color_picker_args', function (args, $field) {

		// Add predefined color palette.
		args.palettes = ['#5D2BFF', '#FFE194', '#E45353', '#96DFFF', '#FFBDA7', '#8CEAB7', '#ECA7C8'];

		return args;
	});
}

enqueue.php

  if (class_exists(ACF::class)) {
    \add_action('wp_enqueue_scripts', [$this, 'addInlineGlobalVariables']);
  }
  
  /**
	 * Method that adds inline global css variables
	 *
	 * @return void
	 */
	public function addInlineGlobalVariables(): void
	{
		$handle = "{$this->getAssetsPrefix()}-theme-styles";

		global $post;
		$pageId = $post->ID;

		$pageColor = get_field(MetaFields::PAGE_COLOR, $pageId) ?? '#111111';
		$customCss = ":root{--global-page-color: {$pageColor}}";

		\wp_add_inline_style($handle, $customCss);
	}