Oxygen 6 ACF Dynamic Colours Tutorial – Phe Ledwell

Using Dynamic Colours from an ACF Select Field in Oxygen 6

During the Beta release of Oxygen 6, I received a support request from a customer wanting to pre-define colours via an ACF Select field and use them dynamically in Oxygen 6. This setup would allow their client to change the colour of various elements—such as background colours, text, or icon fills—without having direct access to the Oxygen builder.

Here’s how to achieve this:

Step 1: Add Your Code Snippet

To begin, add the following code to a snippet management plugin, such as WPCodeBox. This example assumes your ACF field is named select_colour. If you choose a different name, be sure to update the ACF field name on line #7:

<?php

// Add a dynamic CSS variable to the <head> of your site
add_action('wp_head', function() {
    if (function_exists('get_field')) {
        // Retrieve the value of the ACF field
        $selected_colour = get_field('select_colour');
        
        // Check if a value is set and split the value and label if necessary
        if ($selected_colour) {
            $colour_value = explode(' : ', $selected_colour)[0]; // Extracts the hex value before " : "
        } else {
            $colour_value = '#0000ff'; // Default colour if not set
        }

        // Output the CSS variable to the site head
        echo '<style>
            :root {
                --dynamic-colour: ' . esc_attr($colour_value) . ';
            }
        </style>';
    }
});

?>

Step 2: Set Up Your ACF Field Group

Create a field group in ACF named something like “Page Fields” and add a Select field called Select Colour. Populate it with the following values and labels (or customise them as needed):

#FF0000 : Red
#40E0D0 : Turquoise
#8FCE00 : Lime Green

Apply this ACF field group to the required post type.

Step 3: Configure Oxygen

Open or create a page using Oxygen.
Select the element where you want to apply the dynamic colour and add a class to it (e.g., hero-container).
With the class selected, open the Background controls and enter the following into the colour box:

var(--dynamic-colour)

Save the page in the builder.

Step 4: Test Your Dynamic Colours

Visit the page on the front end of your site to see the background colour applied. To change it, go to the WordPress admin area, select a different colour from the ACF Select field, and view the page again. The background colour will update accordingly.

If you’re looking to do something similar in Oxygen Classic, check out our related tutorial: Using Dynamic Colours from an ACF Color Picker Field in Oxygen.