Cannot access theme.header.background.color

[paladinodeimari]

This is a piece of my fields.json:

{
    "label": "Website header",
    "name": "header",
    "type": "group",
    "children": [
      {
        "label": "Background",
        "name": "background",
        "type": "group",
        "children": [
          {
            "label": "Color",
            "name": "color",
            "type": "color",
            "required" : true
          }
        ]
      }
    ]
  }

I'm trying to get the value of backround color but I get a wrong content.

Inside my css:

.header {
  background-color: {{ theme.header.background.color }}
}

In Chrome inspector I get:

.header {
    background-color: {color=null,opacity=null,show_opacity=null,css=};
}

What's wrong?

[Oezcan · Accepted solution]

What I just noticed is that if the color_field is packed in a group, the group must also be addressed. So not

{% set bg_color = theme.color_field.color %}

but

{% set bg_color = theme.background.color_field.color %}

[Oezcan]

Ah,

then you need something like this:

{%- set bg_color = 'rgba(' + theme.color_field.color|convert_rgb + ", " + theme.color_field.opacity/100 + ')' %}

[paladinodeimari]

Done but still doesn't work.

Cannot understand why!

The point is that I'm using color for other elements and in that case it works.

[Oezcan]

Hello  @paladinodeimari ,

The color value is missing in your object:

Here is a simple example:

{
"name": "color_field",
"label": "Color field",
"required": false,
"locked": false,
"inline_help_text": "",
"help_text": "",
"type": "color",
"default": {
  "color": "#ffffff",
  "opacity": 100 }
}

This is how you get the color and can "shorten" it

{% set bg_color = theme.color_field.color %}

And this is how you can then assign the color to it.

header {
    background-color: {{ bg_color }}
}

That's all 🙂

I hope I could help you.

Best regards

Özcan

[paladinodeimari]

Thank You Özcan.

I try what you suggested but I've still problem.

I put in fields.json the cut and paste of your code:

{
        "label": "Background",
        "name": "background",
        "type": "group",
        "children": [
          { "name": "color_field", "label": "Color field", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } }
        ]
      }

Then in my css:

{% set bg_color = theme.color_field.color %}

.header { background-color: {{ bg_color }} }

But now this is what I get in inspector:

.header {
    background-color: rgba(#null,1);
}

And if I open the css within the browser it doesn't contain the code .header!

I have published all the modified files.