[Resolved] Theme Defaults Override in Child Theme for Colour Vars

[David]

Hi, I have renamed all the default var names of colours in the customizer (contrast, accent, etc) and now all the Generatepress default colours are broken (e.g. contrast has no corresponding CSS value any more). I’m assuming I need to override the theme defaults in my child theme with a function/filter (or is there a better way to do it?!) to map old vars to new, but am new to Generatepress and could really do with some help! I didn’t realise that renaming the vars would not only break the customizer settings but also the default styles. Thanks!

[David]

Hi there,

we did add a Lock and a warning to the the CSS variable name field:

Changing this name will break styles that are using it to define its color.

Did that not show up ?

Options:

1. remap the colors used in the Customizer > Colors to your new variable name colors.
This is unavoidable if you want to use your own naming convention.

2. Add back the original colors to the color pallete. Here are the names and the hex values:

:root {
    --contrast: #222222;
    --contrast-2: #575760;
    --contrast-3: #b2b2be;
    --base: #f0f0f0;
    --base-2: #f7f8f9;
    --base-3: #ffffff;
    --accent: #1e73be;
}

You omit the initial -- from the name in the field as GP will add that.

[David]

Hi David, yes the warning showed up but I thought that was just for the customiser settings, not the core css. Can you please help me with option 1 from your 2 options? Thanks!

[David]

Where else did you have the Global Colors assigned ? As they are only used in the Customizer, unless you either specifically use them in the Block Editor or in your own CSS.

[David]

Just to explain a little further, I changed the var names as mentioned, then when I loaded up the front end, as an example I could see in the main GP css file in the developer tools on my browser:

body { color: var(–contrast); }

…and contrast is no longer in use as I changed the names. I assumed that I would be able to filter the theme defaults in my child theme somehow. Apologies, I’m new to Generatepress after moving from Genesis.

Thanks!

[David]

To add a bit of clarity David, I changed the customiser colours which worked to a degree, but when I clicked ‘default’ it tried to reset to the original browser names e.g. contrast, accent etc. I want to be able to redefine the variables AND defaults from the ground via my child theme. Thanks…

[David]

Ah ok. If you want do the changes via the Child theme:

1. generate_option_defaults filter can be used to set the default Global Color Pallete:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L20

Which has has the global_colors array:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L69-L108

And an example of the filter in use for setting default colors can be seen here:

https://generatepress.com/forums/topic/changing-global-colors-programatically/#post-2122087

2. generate_color_option_defaults filter can be used to set the default assignment of those colors to the various theme elements:

https://github.com/tomusborne/generatepress/blob/adfe090929b0515cdf894f4c6b722cfe8c0790dc/inc/defaults.php#L121

It includes the array of all defaults. And Tom shares another snippet here showing that filter in use:

https://generatepress.com/forums/topic/changing-global-colors-programatically/page/2/#post-2124898

[David]

Hi David,

I’ve cleared out all preset colour options and defaults from the customizer and then added the code below to my child theme functions file, but I cannot seem to get the customizer to read these defaults (by which I mean there are no colour tabs or defaults set). Dynamic CSS cache is off. As mentioned earlier, all I am trying to achieve is to set a default colour palette and then match the default colour options to the new var names.

// FFDV Generate default colour options for customizer
add_filter( 'generate_option_defaults', function( $defaults ) {
    
	$defaults['global_colors'] = array(
        array(
            'name' => __( 'Base', 'qias' ),
            'slug' => 'base',
            'color' => '#ffffff',
        ),
		array(
            'name' => __( 'Grey', 'qias' ),
            'slug' => 'base',
            'color' => '#101011',
        ),
        array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '2' ),
            'slug' => 'grey-2',
            'color' => '#323233',
        ),
        array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '3' ),
            'slug' => 'grey-3',
            'color' => '#5c5c5d',
        ),
		array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '4' ),
            'slug' => 'grey-4',
            'color' => '#a7a8aa',
        ),
        array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '5' ),
            'slug' => 'grey-5',
            'color' => '#d7d8d9',
        ),
		array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '6' ),
            'slug' => 'grey-6',
            'color' => '#e9e9ea',
        ),
        array(
            /* translators: Grey number */
            'name' => sprintf( __( 'Grey %s', 'qias' ), '7' ),
            'slug' => 'grey-7',
            'color' => '#f2f2f2',
        ),
		array(
            'name' => __( 'Blue', 'qias' ),
            'slug' => 'blue',
            'color' => '#201547',
        ),
        array(
            /* translators: Blue number */
            'name' => sprintf( __( 'Blue %s', 'qias' ), '2' ),
            'slug' => 'blue-2',
            'color' => '#413862',
        ),
		array(
            'name' => __( 'Gold', 'qias' ),
            'slug' => 'gold',
            'color' => '#b0aa7e',
        ),
        array(
            /* translators: Gold number */
            'name' => sprintf( __( 'Gold %s', 'qias' ), '2' ),
            'slug' => 'gold-2',
            'color' => '#c4bf9e',
        ),
    );

    return $defaults;

} );

// FFDV Map default colour options to customizer
add_filter( 'generate_color_option_defaults', function( $defaults ) {

    $defaults['background_color'] = 'base';
	$defaults['text_color'] = 'grey-1';
	$defaults['link_color'] = 'grey-1';
	$defaults['link_color_hover'] = 'grey-3';
	$defaults['link_color_visited'] = 'grey-1';

    return $defaults;

} );

Thanks!
David

[David]

Hi David, any help you can provide with this above would be much appreciated as it’s preventing me from moving forward with my design at present. To confirm, I expected the code above in functions.php (child theme) to populate some default customizer color tabs and remap 4 of the default values. Thanks! David

[Fernando]

Hi David,

Another option is if you try to recreate the default colors manually by adding new Global Colors as such: https://share.getcloudapp.com/mXuxmRz4, and naming the with the previous/names color variable names, the elements/blocks would be able to read them.

For instance, one default color you mentioned is var(–contrast). If you create a new Global Color named contrast, this should also work and fix the elements/blocks with color issues using var(–contrast).

The default colors are:
contrast
contrast-2
contrast-3
base
base-3
accent

Kindly let us know what you think.

[David]

Hi Fernando,

This isn’t an option for me I’m afraid. I just need to be able to make the 2 functions above work as expected so that my theme is customised programatically. Thanks!

[David]

I tested your code and the first snippet works as expected and is loading the default color pallet for me.
The second snippet needs the actually css value to be passed to the variable – see here for an example:

https://generatepress.com/forums/topic/changing-global-colors-programatically/page/2/#post-2128716

[David]

Hi David,

Function 1: I;ve just managed to get this working using:
add_filter( ‘generate_option_defaults’, ‘ffdv_filtered_options’ ); AND add_filter( ‘option_generate_settings’, ‘ffdv_filtered_options’ ); (One of Tom’s posts mentioned you may have to set both.)

Function 2: I’ve tried adding the css values as you suggested but no luck:

(a) There is no colour auto-populated in e.g. ‘Background colour’ in the customizer
(b) If I click ‘Default’ in the customizer next to ‘Background’, it loads ‘var(–base-2)’ which is one of the GP defaults, not my new defaults.

Just for clarity, it’s this that is still not working:

add_filter( 'generate_color_option_defaults', function( $defaults ) {
    $defaults['background_color'] = 'var(--base)';
	$defaults['text_color'] = 'var(--grey-1)';
	$defaults['link_color'] = 'var(--grey-1)';
	$defaults['link_color_hover'] = 'grey-3';
	$defaults['link_color_visited'] = 'var(--grey-1)';
    return $defaults;
} );

Thanks!

[David]

Hmmm… so the filter is working as i can see the values being updated in the array.
But they are not being loaded in the customizer panel itself.
I am going to pass this over to Tom to take a look if thats ok ?

[David]

Thanks David, look forward to Tom’s reply…

[Author]

Posts