Use color from color manager as css variable

[ofirdoo]

Hello,

is it possible to use defined color(s) from the color manager as css variable when defining color inside the element css option?

For example, I have defined three colors in color manager, and on some elements I need to use $el option and then later I need to change color 1. When I change color 1 it will be changed everywhere with that preset, but then I need also to change it manually everywhere inside all elements.

[ruenel]

Hello Ofir,

Thanks for writing in!

Normally, you can access the Global Colors in each of the element settings. If you want something more custom, you can use the Global Colors via Dynamic content {{dc:global:color id="YOUR_ID"}}. Kindly check out the documentation here:

• Color Manager | Themeco Docs

Kindly let us know how it goes.

[ofirdoo]

Hello,

unfortunately, this won’t work.

Inside element when using $el { background-color }, this won’t accept dynamic content code.

[christian]

Hey @ofirdoo,

What will works is you register the Global Color in the Global CSS using CSS Variables. Then, you use the CSS variable in the Element CSS. As you can see in the screenshot below, it works in the Accordion header.

[ofirdoo]

Hello again,

yes, this will work.

Thank you.

[tristup]

Hi @ofirdoo,

Glad that we are able to help you.

Thanks

[dabigcheeze]

/**
 * Get theme colors from Pro and turn them into classes and CSS variables
 * Author: Michael Bourne
 */

$themecolors = get_option('cornerstone_color_items');
if($themecolors) {

  $css = '<style type="text/css" id="themecolours">';
  $colors = json_decode( stripslashes( $themecolors ), true );
  $count = count($colors);

  for($i = 0; $i <= $count-1; $i++){

    $name = 'xtt-' . preg_replace('/[^a-z0-9]/', "", strtolower($colors[$i]['title']));
    $css .= ':root { --' . $name . ': ' . $colors[$i]['value'] . '; } ';
    $css .= '.' . $name . ' { color: ' . $colors[$i]['value'] . '; } ';
    // you may need to add an !important to the rule to override X settings, like so:
    // $css .= '.' . $name . ' { color: ' . $colors[$i]['value'] . '!important; } ';
  }

  $css .= '</style>';

  function colors_css() {
    global $css;
    echo $css;
  }
  add_action('wp_head', 'colors_css');

}

[marc_a]

Hey @dabigcheeze,

We are not sure what you needed based on my response but just want to let you know that custom coding is outside the scope of our theme support.

Thank you.