Using customized colors in child theme

Resolved Giuseppe
(@mociofiletto)

6 years ago

Hi, I wonder if it is possible to use the color chosen by the customizer in a child’s css theme.
I know I can enter the name of the classes in functions.php or in custom templates to use those colors, but I want to know if it is possible to call those colors (dynamically chosen in the customizer) in the CSS.

More: is there a preferred (or easy) way to add a customizer color option on child theme?

Thanks, for this beautiful theme.

Viewing 2 replies - 1 through 2 (of 2 total)

Theme Author

Anders Norén

(@anlino)

6 years ago

Hi @mociofiletto,

Glad you like it!

Chaplin includes helper classes for applying different colors to different properties for different elements, so the easiest way would be to add the appropriate class to the element in your child theme, and the Customizer colors will be applied.

The classes included in the latest version are:

/* Colors ------------------------------------ */

/* TEXT COLOR */

.color-body-background,
.color-body-background-hover:hover { color: #fff; }

.color-primary,
.color-primary-hover:hover { color: #1A1B1F; }

.color-secondary,
.color-secondary-hover:hover { color: #747579; }

.color-accent,
.color-accent-hover:hover { color: #007C89; }

.color-border,
.color-border-hover:hover { color: #E1E1E3; }

.color-light-background,
.color-light-background-hover:hover { color: #F1F1F3; }

/* BACKGROUND COLOR */

.bg-body-background,
.bg-body-background-hover:hover { background: #fff; }

.bg-primary,
.bg-primary-hover:hover { background: #1A1B1F; }

.bg-secondary,
.bg-secondary-hover:hover { background: #747579; }

.bg-accent,
.bg-accent-hover:hover { background: #007C89; }

.bg-border,
.bg-border-hover:hover { background: #E1E1E3; }

.bg-light-background,
.bg-light-background-hover:hover { background: #F1F1F3; }

.bg-current-color,
.bg-current-color-hover:hover {
	background: currentColor;
}

/* BORDER COLOR */

.border-body-background,
.border-body-background-hover:hover { border-color: #fff; }

.border-color-primary,
.border-color-primary-hover:hover { border-color: #1A1B1F; }

.border-color-secondary,
.border-color-secondary-hover:hover { border-color: #747579; }

.border-color-accent,
.border-color-accent-hover:hover { border-color: #007C89; }

.border-color-border,
.border-color-border-hover:hover { border-color: #E1E1E3; }

.border-color-light-background,
.border-color-light-background-hover:hover { border-color: #F1F1F3; }

/* FILL COLOR */

.fill-children-body-background,
.fill-children-body-background * {
	fill: #FFF;
}

.fill-children-primary,
.fill-children-primary * {
	fill: #1A1B1F;
}

.fill-children-secondary,
.fill-children-secondary * {
	fill: #747579;
}

.fill-children-accent,
.fill-children-accent * {
	fill: #007C89;
}

.fill-children-border,
.fill-children-border * {
	fill: #E1E1E3;
}

.fill-children-light-background,
.fill-children-light-background * {
	fill: #F1F1F3;
}

.fill-children-current-color,
.fill-children-current-color * {
	fill: currentColor;
}

If you want to apply the classes to certain elements, or if you want the targeting to be more dynamic, you can add targets to any color and property to the custom CSS output by hooking into the chaplin_get_css_elements_array filter, in class-custom-css.php.

I might take a look at adding the colors chosen as CSS variables as well, so child themes can make use of them that way.

If you want to add or modify Customizer color options in a child theme, you can hook into the chaplin_accent_color_options filter, which includes all of the colors in the theme. If you add a color to it, you’d also need to add that color (and any properties and elements you want to style with it) to the chaplin_get_css_elements_array filter.

— Anders