# Theme Fields.json and Module Field

**URL:** <https://community.hubspot.com/t/theme-fields-json-and-module-field/81012>\
**Category:** CMS Development\
**Tags:** professional, enterprise\
**Created:** [May 11, 2023, 1:12pm UTC](https://community.hubspot.com/t/theme-fields-json-and-module-field/81012 "2023-05-11T13:12:58Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [May 13, 2023, 8:19pm UTC](https://community.hubspot.com/t/theme-fields-json-and-module-field/81012/2 "2023-05-13T20:19:48Z")

</div>

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

---

_[View the full topic](https://community.hubspot.com/t/theme-fields-json-and-module-field/81012)._