Kadence - Change theme colors

Global Color Palette

To change the global color palette in your theme, navigate to Appearance > Customize > Colors & Fonts > Colors.

Under Global Palette, you can select your new colors. You can either replace all of the colors with your own, or replace some and leave others. It's also fine for colors to repeat within the palette. Please note that the position and order of colors is very important — click here to learn more about how to properly use the Kadence Global Palette.

Below is an example of the Global Palette in our Savannah theme:

Note: If there are any areas in your theme that do not change  (i.e. a certain section on a certain page) after changing the colors in the Global Palette, a custom color may have been set for a specific block. You can change its color directly in the block settings.

Alternate Color Palettes

Kadence supports two alternate predefined color palettes, which can be found at Appearance > Customize > Colors & Fonts > Colors. Below is an example of an alternate palette in our Savannah theme:

You can click "Palette 2" or "Palette 3" to access the alternate color palettes. Feel free to edit these palettes!

Global Default Colors

Once your color palette is set up with your own colors, your site will update automatically with those colors!

But let's say that your theme currently uses Global Color 3 for your Heading color, and you'd like to use Global Color 4 for your Headings instead. Here's where to change some of the global default colors in your theme:

Body Font Color: Appearance > Customize > Colors & Fonts > Typography > Base Font

Link Color: Appearance > Customize > Colors & Fonts > Colors > Content Links

Heading Color: Appearance > Customize > Colors & Fonts > Typography > Headings (each heading has its own color setting)

Button Color: Appearance > Customize > Colors & Fonts > Buttons (can change the initial button color and hover color here)

Header and Footer Colors

The Customizer is where you'll edit your Header/Navigation and Footer. You can hover over any Header or Footer element in the Live Preview and click the Edit icon to customize that area.

Let's say you want to change the background color of the top navigation bar in your theme. Hover over it, click the blue pencil (Edit) icon, and then you'll see these settings appear on the left:

Simply click on the color swatch under Top Row Background, and then select a color from your palette (or a custom color!).

Now that you've updated the background color, maybe you'd like to change the link color for the Secondary Navigation Menu that is inside the Top Row. Make sure that you are in the Header area of the Customizer, and then look to the Header Builder at the bottom of your screen:

Click on the Settings icon next to Secondary Navigation. That will bring up these settings:

Under Navigation Colors, you can change the color of the link, hover, and active states. You can also update the navigation menu font here!

These same principles apply to ALL elements in the Header and Footer of your theme. You can use the Kadence Header Builder and Kadence Footer Builder to navigate the settings and make updates as needed.

Block Editor Colors

You also have full control of your colors within the Block Editor. Click on any section and go to the Style tab to change its background color:

The same applies to headings and text. Click on the text you'd like to edit, and go to the Style tab:

In this screenshot, you'll notice that there is no color selected for this Heading. This heading is inheriting the Heading color set in the Customizer (see "Global Default Colors" above), but you're welcome to select a different color from your palette!