In the 7.6 release, the custom colors feature was replaced by a global colors feature (if you had custom colors these were moved into the new feature). This is another addition where I didn’t completely comprehend the power that it provides. One of my pet peeves was that the color names that you provide do not translate to CSS variables, but again, this was a lack of foresight on my part.
Themes within a theme
If you are following the development of WordPress, you know that in 5.9 you will have a theme.json file that stores the theme settings to include your color palette. In my opinion, this feature is the Avada interface for that capability and even if it doesn’t export as a theme.json (yet?) it provides much of the same power. Imagine you change the value of three colors and you have completely revamped the look and feel of your pages. Combined with the global typography, in less than 5 minutes, you can move from a techno-light look to an old-world dark appearance. or you love one of the Avada demos, but you need your color palette and typography choices – bam, done. Based on the feedback from the Them Fusion team, the benefit of these global updates will become very apparent in the future.
What’s in a name
As I mentioned earlier, I was not happy that the names I assigned were not translated into CSS variables, but that is because I use a couple of design systems that use primary, secondary, and accent to differentiate the colors. The Avada implementation allows you to name the colors so that when you mouse over them in the color picker they are easy to discern. The reason for not having a name in the variables sort of makes sense especially if you use the variables in custom CSS.
What if today your primary brand color is red and tomorrow it is blue. In the global colors, you change color 1 to blue and the name is not changed from primary-red to primary-blue. If the naming was translated to the variables, you would have to search for every instance of primary-red and make the change. Keeping the variable “–awb-color1” means that every instance is automatically updated (you have to love CSS). Using the –awb namespace also means there is very little risk of overwriting your custom styles
Feature request
I did submit a feature request already to have the color name moved above the color picker. Not only will this match the typography interface, I found myself trying to name the colors in the color value picker — that doesn’t work :). I am also going to submit a feature request to see if they can add a reorder feature that would allow us the reorder the colors and typography choices.
Originally published on Dec. 21, 2021
