Could not resolve function 'color'

SOLVE
pawel_p
Member

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

0 Upvotes
1 Accepted solution

Accepted Solutions
Teun
Solution
Guide | Diamond Partner

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

 

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

0 Upvotes
2 Replies 2
Teun
Solution
Guide | Diamond Partner

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

 

Did my answer solve your issue? Help the community by marking it as the solution.

View solution in original post

0 Upvotes
pawel_p
Member

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.

0 Upvotes