Theme Colors

The Theme Colors feature allows you to change the theme’s default color palette in one place.

You can still change colors on each element individually in the customizer 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 color palette.

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: March 16th, 2022


Related Articles

Scroll to Top

Download

Download Page Builder Framework and be the first to get informed about new features & updates!

OR

Get 10% off our Premium Add-On (yearly plan).
Coupon Code to enter during checkout: 10OFF View Pricing