Get Oxygen Global colors as CSS Variables

Marko Krstić
8 Jun 2021

If you want to write external CSS the easiest way to sync the global colors between the oxygen and an external CSS is through the variables.

You will need to get all variables into the header under the root. The output should look like this:

<style type='text/css'>
:root {
	 --blue: #2245f8;
	 --yellow: #ffeb57;
	 --black: #1d1d1b;
	 --white: #ffffff;
	 --grey: #89a0b5;
	 --light-grey: #e4e6e8;
	 --ultra-light-grey: #f8f9fb;
	 --new-feature: #64fcc2;
}
</style>
<?php
function dplugins_oxy_colors_css(){
    $oxy_colors = oxy_get_global_colors();
    //echo "<pre>"; print_r($oxy_colors); "</pre>";
    if(!empty($oxy_colors['colors'])){
        $html = "<style type='text/css'>\n:root {\n";
        $color_name = "";
        foreach($oxy_colors['colors'] as $color){
            $color_name = strtolower(trim(str_replace(" ", "-", $color['name'])));
            $html .= "\t --".$color_name.": " . $color['value'] . ";\n";
        }
        $html .= "}\n</style>";
        echo $html;
    }
    //exit;
}
add_action('wp_head', 'dplugins_oxy_colors_css', 999999999999);
?>

Was this article helpful?

Tags

Categories

Never miss new post again

Subscribe and get list of new posts in your inbox

Click to Copy