Could not resolve function 'color'

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

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 %}

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.