Could not resolve function 'color'

[pawel_p]

I have an error in my CSS file saying "Could not resolve function 'color'" on the line where I have the theme override specific styles:

/* Theme Override Specific style */
{% set header_bg_color = color(theme.header.background_color) %}
{% set footer_bg_color = color(theme.footer.background_color) %}

The current setting in fields.json are as follow:

[
  {
    "label": "Website header",
    "name": "header",
    "type": "group",
    "children": [
      {
        "label": "Background color",
        "name": "background_color",
        "type": "color",
        "default": {
          "color": "#EFEFEF",
          "opacity": 100
        }
      }
    ]
  },
  {
    "label": "Website footer",
    "name": "footer",
    "type": "group",
    "children": [
      {
        "label": "Background color",
        "name": "background_color",
        "type": "color",
        "default": {
          "color": "#EFEFEF",
          "opacity": 100
        }
      }
    ]
  }
]

Please help if you have an idea why I have these errors: 'Error: Cannot resolve property' and 'Error: Syntax error'.

Thnak you

[pawel_p]

Thanks. I manage to fix that before you sen the reply.

The color() function I saw in a boilerplate theme, when i created a example in a Design Tool.

[Teun · Accepted solution]

Hi @pawel_p , where did you find the `color()` function? You should be able to set the variables like this:

{% set header_bg_color = theme.header.background_color.color %}
{% set footer_bg_color = theme.footer.background_color.color %}

You can also access the opacity like this:
 

{% set header_bg_opacity = theme.header.background_color.opacity %}
{% set footer_bg_opcaity = theme.footer.background_color.opacity %}