Global Colors

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.