After revising the typography options, we have now also tackled the color options and improved them fundamentally. Our newest themes have needed rather few adjustments here, so the biggest changes are mostly in our slightly older themes.
Switch to CSS variables
Implementing the color options always required a lot of inline CSS, because the bottom line is that every definition of a color in the theme’s style.css has to be overwritten if different colors are configured in the settings. To do this, for all selectors, IDs and classes, the color was simply redefined with CSS and inserted in the header of the website to override the default values.
With the latest updates, we have now switched all color options to using CSS variables. Instead of having to manually override dozens of CSS selectors, modifying the color variable is now enough. This requires very little inline CSS, increases performance, and also improves the live preview in the Customizer. The preview in the Customizer was always a bit incomplete because some selectors like hover styles were difficult to override.
Enhancement of the existing color options
Likewise, we added additional color options in some themes as needed to make individual elements more flexible and granular. For example, instead of one color option for the entire content area, there are now separate options for links, buttons, and post titles, so they can also be different.
Therefore, we recommend checking the color options in the Customizer after installing the update and setting the newly added options if needed.
Introduction of color options for the Block Editor
Finally, in addition to the “Theme Colors” tab, a new “Block Colors” panel is now available in the Customizer to configure the color palette for the Gutenberg Block Editor. This means that the block colors can now be adapted to the theme and are no longer fixed, but flexible and freely selectable.
Updated Themes and Add-ons:
The updates were made for all current themes which are not scheduled for retirement in 2022.