The Global Colors system in Sydney and Sydney Pro allows you to change colors in a consistent manner, across your whole website. This system is also integrated with Elementor so the colors you defined in the Customizer can also be used as global colors in Elementor.
Please note: this system is available from Sydney v2.26 and Sydney Pro v4.0.5.
Customize the Global Colors palette
The global color options are located in Customize > Colors. You can click on each color and customize if needed.
A change to a global color in the Global Colors option will affect all color option connected to it. For example, changing the 4th global color will also change the headings (if you haven’t disconnected the options):
Here is a map of the default global colors and the elements they affect:
Color 1: primary color, used for accents, buttons, etc.
Color 2: hover color
Color 3: body text color
Color 4: general headings color
Color 5: used for smaller text, like post meta
Color 6: dark backgrounds, like the header & footer
Color 7: light backgrounds
Color 8: border color
Color 9: site background color
How to connect color options to Global Colors
By default, some of the theme’s color options are connected to global colors. You can tell that a color option is connected to a global colors if the icon next to it is blue rather than grey.
You can click the icon to connect an option to any global color you’d like. Any change to that global color option will also affect the option you’ve just connected.
To disconnect an option, simply click on the selected global color to unselect it or use the color picker manually to change the color.
Theme Global Colors in Elementor
Sydney automatically sends all your global color choices to Elementor, so they are ready for use. Click on any color option in Elementor and you’ll notice Sydney’s global colors, exactly as you’ve configured them in the Customizer.
The advantage here is that you can configure your global colors in the Customizer and they will apply for both theme elements and Elementor widgets.
