Hi @Jun22,
The theme fields.json is for “global” styles which will define theme-wide settings. In most cases you’ll find those in the theme-overwrite.css BUT sometimes also in some modules.
The fields.json in modules is always module specific and unless it’s a global module it will only affect this single instance of a module. So if you want to have the color changed globally it could make sense to put the color option into the theme fields (or simply hard code it into a CSS file).
About your code: Replacing
{{ module.styles.drop_downs.background_profile.color.color }}
with
{{ module.styles.drop_downs.background_profile.color.css }}
will do it’s job.
Or you can write it like this(which provides the exact same result as the code above):
rgba({{ module.styles.drop_downs.background_profile.color.color|convert_rgb }}, {{ module.styles.drop_downs.background_profile.color.opacity/100 }});
And since the icon is in an link element(a-tag) I would check if the link element has an “!important” suffix. (hopefully not)
best,
Anton