Global Colors

The Global Colors feature allows you to change the theme’s default colors in one place.

You can change the colors on each element in the customizer specifically but sometimes you want to change all the default colors used in the theme in one place.

That’s where the global color settings come in handy. With the power of CSS variables, all colors in the theme can be changed easily.

Navigate to General > Global Colors in the WordPress customizer to change the theme default colors.

Use CSS variables with custom CSS

When writing custom CSS you can use the above values like this:

.my-element {
	background-color: var(--base-color);
	color: var(--accent-color);
}

Available variables:

var(--base-color-alt)
var(--base-color)
var(--brand-color)
var(--brand-color-alt)
var(--accent-color)
var(--accent-color-alt)

Last updated on: July 10th, 2020


Related Articles

Scroll to Top

Black Friday Sale

Enter your email address and be the first to get notified when our Black Friday sale begins!

Download

Enter your email address and be the first to get informed about new features & updates!

Download

Enter your email address and be the first to get informed about new features & updates!