[Support request] customize default colors via css

[sparkle]

if i put this in my customizer, the colors change on the page, but not in the customizer circles.

:root {
–contrast: #09283D;
–contrast-2: #025547;
–contrast-3: #a9d4cd;
–base: #f0f0f0;
–base-2: #1A878E;
–base-3: #81fce7;
–accent: #DC3BA1;
}

if i put it in my child theme, neither change, even if i add !important. why not? any way to have it all? there used to be function that no longer seems to work that set custom default colors and the customizer reflected the changes.

// change gp color palette

add_filter( 'generate_default_color_palettes', 'tu_custom_color_palettes' );
function tu_custom_color_palettes( $palettes ) {
  $palettes = array(

    '#351C4D', /* brand */
    '#FEBF7B', /* accent */
    '#FF7E5F', /* action */
    '#765285', /* hover */
    '#C1c1c1', /* light */
    '#fe7b84', /* midtone */
    '#000000', /* black */
    '#FFFFFF', /* white */
  );
  
  return $palettes;
}

[David]

Hi there,

see Toms reply here:

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

[sparkle]

well, i did find and try that code, but for some reason it doesn’t work for me. subscriber credentials included below. let me know if you need more access to tell me what i did wrong. it’s the only thing in my functions file.

[Leo]

Just to confirm, are you using the new global colors system?
https://docs.generatepress.com/article/global-colors-overview/

And can you try adding the code using Code Snippets plugin with the parent theme activated?

Let me know 🙂

[sparkle]

yes, it’s a brand new install and i see the global colors system in my customizer.

i removed the code from my functions file, installed code snippets, added it, saved it, no change, activated it, no change. double checked parent theme vs child theme. weirdly i can see the new colors in the customizer now, but not on the pages. even with incognito.

then i gave your username admin access because i’m seriously confuzzled.

[sparkle]

ok. with a little patience the cache on the front end let go and now i see the colors with the code snippet.

[sparkle]

but why can’t i do anything with my child theme? rawr. i don’t want to use code snippets.

[David]

Can you retry adding the code to the Child Theme functions.php ?

[sparkle]

ok. it’s there now.

[sparkle]

fyi, i have the child theme one set like this to see the difference.

 add_filter( 'generate_option_defaults', function( $defaults ) {
     $defaults['global_colors'] = array(
         array(
             'name' => __( 'Contrast', 'generatepress' ),
             'slug' => 'contrast',
             'color' => 'red',

[sparkle]

aaaand… i can see the red in the customizer but not the live site even if i deactivate code snippets (which i almost never use, will that disable it or not?

[Leo]

The function here looks incomplete:
https://generatepress.com/forums/topic/customize-default-colors-via-css/#post-2493196

Can you try the exact code here in the child theme?
https://generatepress.com/forums/topic/changing-global-colors-programatically/#post-2122087

Please clear and disable all caching plugins and server caching for now.

[sparkle]

oh that was just the one part of it that i changed the color so it was different from the one in the code snippet plugin. it shows the titles red if it’s using the function.file. the full code in my child theme is this

//gp change color palette
 
 add_filter( 'generate_option_defaults', function( $defaults ) {
     $defaults['global_colors'] = array(
         array(
             'name' => __( 'Contrast', 'generatepress' ),
             'slug' => 'contrast',
             'color' => 'red',
         ),
         array(
             /* translators: Contrast number */
             'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '2' ),
             'slug' => 'contrast-2',
             'color' => '#025547',
         ),
         array(
             /* translators: Contrast number */
             'name' => sprintf( __( 'Contrast %s', 'generatepress' ), '3' ),
             'slug' => 'contrast-3',
             'color' => '#a9d4cd',
         ),
         array(
             'name' => __( 'Base', 'generatepress' ),
             'slug' => 'base',
             'color' => '#f0f0f0',
         ),
         array(
             /* translators: Base number */
             'name' => sprintf( __( 'Base %s', 'generatepress' ), '2' ),
             'slug' => 'base-2',
             'color' => '#1A878E',
         ),
         array(
             /* translators: Base number */
             'name' => sprintf( __( 'Base %s', 'generatepress' ), '3' ),
             'slug' => 'base-3',
             'color' => '#81fce7',
         ),
         array(
             /* custom colors */
             'name' => __( 'Hot Pink', 'generatepress' ),
             'slug' => 'sub-hot-pink',
             'color' => '#BF047E',
         ),
         array(
             'name' => __( 'Teal', 'generatepress' ),
             'slug' => 'sub-teal',
             'color' => '#32838C',
         ),
         array(
             'name' => __( 'Aqua', 'generatepress' ),
             'slug' => 'sub-aqua',
             'color' => '#04BF9D',
         ),
         array(
             'name' => __( 'Yellow', 'generatepress' ),
             'slug' => 'sub-yellow',
             'color' => '#DC3BA1',
         ),
         array(
             'name' => __( 'Orange', 'generatepress' ),
             'slug' => 'sub-orange',
             'color' => '#D94423',
         ),
     );
     return $defaults;
 } );
     

[David]

When you say you see it in the Customizer – is that just in the Global Color pallet?
If so, that is correct – that code only loads the default colors, you would need to then assign them where you require.

[sparkle]

ah… so an image is worth 1000 words here.

customizer shows functions file (red)
https://imgur.com/w7l0fjA

live view does not. even in incognito. var contrast stays black.
https://imgur.com/vUcej38

does disabling code snippets plugin remove the snippets from use?

[Author]

Posts