# Using color variables in CSS: Color not shown in Gutenberg Blocks

**URL:** <https://forum.pinegrow.com/t/using-color-variables-in-css-color-not-shown-in-gutenberg-blocks/8023>\
**Category:** WordPress\
**Tags:** bug\
**Created:** [May 11, 2023, 11:34am UTC](https://forum.pinegrow.com/t/using-color-variables-in-css-color-not-shown-in-gutenberg-blocks/8023 "2023-05-11T11:34:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)\
**Post date:** [May 11, 2023, 11:34am UTC](https://forum.pinegrow.com/t/using-color-variables-in-css-color-not-shown-in-gutenberg-blocks/8023/1 "2023-05-11T11:34:20Z")

</div>

![CleanShot 2023-05-11 at 13.34.01@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/2/2a2817496778cf0ffa39b009b205e275cd861dd5.png)

 ![CleanShot 2023-05-11 at 13.12.34@2x](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/8/80ded8369d67bf2e71b28b6ec36af40e6d8809ae.jpeg)

In this case i use `--green_4` as a var() for background-color of a CSS Class.  
While `--wp--preset--color--green-4` is generated for the use in Gutenberg, the “unprocessed” Variable --green\_4 does not exist in the context of the Block Editor.

As a workaround i would have to redeclare the colors form Design Panel as vars like this in a an editor stylesheet:

```auto
.editor-styles-wrapper {
    --beige_1: #F6F5EB;
    --green_0: #5E7158;
    --green_1: #839D80;
    --green_2: #9BBD9B;
    --green_3: #C9D8C3;
    --green_4: #e5eee6;
    --grey_0: #151515;
    --grey_1: #404040;
    --white: #fff;
    --black: #000;
}

```

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [May 11, 2023, 8:26pm UTC](https://forum.pinegrow.com/t/using-color-variables-in-css-color-not-shown-in-gutenberg-blocks/8023/2 "2023-05-11T20:26:59Z")

</div>

They won’t show in Gutenberg by default since they are just CSS variables. The new theme.json export feature should put them in Gutenberg, though. Give it a try if you haven’t already.

> **[Pinegrow Web Editor 7.4 - 26. April, 2023 | Pinegrow Web Editor](https://pinegrow.com/release_notes/pinegrow-web-editor-7-4-26-april-2023/#wordpress-export-the-theme-json-file)**
>
> New CSS Tree Inspector – Improved Tailwind Class Inspector – Export theme.json in WordPress – AI Assistant improvements and tutorial.

---

<div class="post-metadata">

**Author:** ![MichelyWeb](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/michelyweb/32/6652_2.png) [@MichelyWeb](https://forum.pinegrow.com/u/MichelyWeb)\
**Post date:** [May 12, 2023, 6:14am UTC](https://forum.pinegrow.com/t/using-color-variables-in-css-color-not-shown-in-gutenberg-blocks/8023/3 "2023-05-12T06:14:37Z")

</div>

Thanks @adamslowe for the reply.

The json file is generated as soon as I enable it in theme settings and use the style panel - right? In GB I can use the defined colors for text and background already, but they have special prefixed var names (as can be seen in my post).

Problem is if the vars are used in it’s original form in CSS classes applied to an element.