Using theme.json Presets in Style.css?

  • afarsh

    (@afarsh)


    1 year, 8 months ago

    We are using WordPress 6.6 and created our theme.json to it’s fullest but we still need to add some custom css via style.css. The question is whether it is possible to use the CSS presets from our theme.json file within style.css.

    We tried for instance:

    color: var(–wp–preset–color–{our-custom-color});

    But is it not working. Style.css file does not seem to recognize the preset. The Style.css file is working fine for other general css declarations.

    Thank for any guidance with this.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Alex de Borba

    (@alexdeborba)

    1 year, 8 months ago

    Hello @afarsh,

    To use CSS presets from your theme.json in your style.css, here is a streamlined approach:

    If the variables are available, make sure you are referencing them properly in style.css. The syntax should look like this:

    color: var(--wp--preset--color--custom-color);

    If the variables are not globally scoped, add them to your theme.json so they appear in a global scope. For example:

    "styles": {
       "color": {
          "text": "var(--wp--preset--color--custom-color)"
       }
    }

    Make sure your style.css is loaded after the theme.json styles so that the variables are available when you reference them.

    Thread Starter afarsh

    (@afarsh)

    1 year, 8 months ago

    Thank you so much Alex. Following your steps did the trick!
    Haivng access to the presets in the style.css is amazing (was worried it would not be possible).

    Thanks again!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Using theme.json Presets in Style.css?’ is closed to new replies.