# 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:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jun22](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jun22/32/34870_2.png) [@Jun22](https://community.hubspot.com/u/Jun22)\
**Post date:** [May 11, 2023, 1:12pm UTC](https://community.hubspot.com/t/theme-fields-json-and-module-field/81012/1 "2023-05-11T13:12:58Z")

</div>

Hello Guys,

Can someone help me regarding the Theme fields.json and Module fields.  
I tried to create a new fields on module e.g image below: I tried to create a new field for Icon to set a color. If I added color on the module fields the code works and color is showing while when tried to edit on the theme settings the result is nothing. I follow the json structure on the fields.json to connect to the module field I created still now working.  
Please share me your opinion,  
Thanks guys

 ![ScreenShot Tool -20230511172153 (1).png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/702500b3b6d9559331ee4b767c92c1e1d3a2fba6.png)

 ![ScreenShot Tool -20230511172218 (1).png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/b/2ba4f75be2f6a39c5d60fe203614672d178c4eb4.png)

 ![ScreenShot Tool -20230511172129.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/c/dc3f4bc48a05e369dcef3c03cea1cb9ba223964d.png)

---

<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