Theme Colors

The Theme 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 theme color settings come in handy. With the power of CSS variables, all colors in the theme can be changed easily.

Navigate to General > Theme Colors in the WordPress customizer to change the themes default colors.

Use CSS variables with custom CSS

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

.your-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)