Using Dynamic Colours from an ACF Color Picker Field in Oxygen

Unfortunately, at the time of writing this tutorial, Oxygen doesn't support dynamic colours. However, there is a workaround using Oxygen's Attributes and a jQuery snippet in a Code Block element.

To start, create your Advanced Custom Fields field group and add an ACF Color Picker field to the group. Apply the ACF field group to the appropriate post type.

Edit your post in the WordPress admin area and set your ACF colour. Next, edit the post (or the post template) in Oxygen. Add a class to the element where you want to use the dynamic colour, such as "custom-bgcolour". With that class selected, go to Advanced > Attributes and add a new attribute with the name "data-colour". Set the attribute value dynamically to the ACF colour field.

Next, add a Code Block element to the builder. Remove the default code from the PHP & HTML tab of the Code Block and replace it with:

<!-- -->

On the JavaScript tab of the Code Block, ad the following code:

jQuery(".custom-bgcolour").css('background-color', function () {
 return jQuery(this).data('colour') 
});

The code won't work in the builder, but if you view the post on the front-end of the site, you will see that the class "custom-bgcolour" will be using your ACF colour picker field as the background colour.