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:

.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: September 14th, 2020


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