By Stephen Walker

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.

Screenshot of color options within the Avada settings.
Color Options

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 December 21, 2021

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Global Color Interface Update

    The Avada 7.7 update normalizes the custom color interface with the custom typography interface.

  • Avada Release Adds Wizardry

    Avada 7.7 brings a setup wizard and other enhancements to help new and experienced users make the most of the builder.

  • Global Typography

    One of the new features in 7.6 is the ability to set global typography settings. When I first saw this I wasn't sure what to make of it as it seemed a little redundant, but I was wrong.