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
2
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
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.
Oezcan
4
Ah,
then you need something like this:
{%- set bg_color = 'rgba(' + theme.color_field.color|convert_rgb + ", " + theme.color_field.opacity/100 + ')' %}
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
6
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 %}
