Special thanks to Renato Ćorluka, the genius creator of Headspin UI for Breakdance for this incredible tip ❤️
The easiest way to get a color from an ACF Color Field, without writing code, is to add a style attribute to an element, preferably a section. Choosing an attribute allows us to pull dynamic data values directly from our ACF field.
To make it even more convenient, we can use a CSS variable to store the color, so we can use it in any element inside the section.
Instructions
1 - In the section where you wish to apply the color, create a new attribute and name it style.
2 - For the value, choose your ACF field
3 - Click the small arrow on the left to access the advanced options.
4 - In the Prepend field, enter your desired CSS variable, for example: --myColor: (remember to include the colon).
5 - For the Fallback, add a default color in case the field is empty.
The --bde-brand-primary-color represents the brand color variable from the global settings but you can choose whatever you want.
This will then add a new inline style to the section:
You can now use the variable anywhere, such as in a heading element, by specifying var(--myColor) as the color.
Please note that the color will not be visible in the backend.
