# More global Colors in Website Theme - fields.json **URL:** \ **Category:** CMS Development\ **Tags:** design-manager, local-development\ **Created:** [August 20, 2024, 1:04pm UTC](https://community.hubspot.com/t/more-global-colors-in-website-theme-fields-json/114841 "2024-08-20T13:04:11Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Torsten\_Utz](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@Torsten\_Utz](https://community.hubspot.com/u/Torsten_Utz)\ **Post date:** [August 20, 2024, 1:04pm UTC](https://community.hubspot.com/t/more-global-colors-in-website-theme-fields-json/114841/1 "2024-08-20T13:04:11Z")
Hello, i want to add more global colors to the fields.json. If I add this the watch command runs into an error. Is it possible to add more than two global colors in the global color group? ---
**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:** [August 20, 2024, 4:17pm UTC](https://community.hubspot.com/t/more-global-colors-in-website-theme-fields-json/114841/2 "2024-08-20T16:17:02Z")
Hi [@Torsten\_Utz](https://community.hubspot.com/t5/user/viewprofilepage/user-id/390719), yes - it’s possible to add more colors to the fields.json. You have basically no limits there. If you’d like to add 99 colors for some reason it would be technically possible but not practical for the user 😁 What error do you get exactly? Most common error is that there’s another property using the same name ![Bildschirmfoto 2024-08-20 um 18.38.51.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/b/a/baed30720eab93bfc81ee712f3a2f2cfeeef49d3.png) Other common issues might be: - missing comma somewhere - wrongly placed (color) Here’s a very basic JSON for this: ```lia-code-sample [ { "name": "colors", "label": "Colors", "required": false, "locked": false, "children": [ { "name": "primary", "label": "Primary color", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } }, { "name": "secondary", "label": "Primary color", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } }, { "name": "common_colors", "label": "Common colors", "required": false, "locked": false, "children": [ { "name": "light_color", "label": "Light color", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } }, // add more colors here ], "type": "group", "inline_help_text": "", "help_text": "", "default": {} } ], "type": "group", "inline_help_text": "", "help_text": "", "default": {} } ] ``` To use use those colors in the theme-override(or any kind of file) do it like this: {{ theme.colors.primary.css }} {{ theme.colors.secondary.css }} {{ theme.colors.common\_colors.light\_color.css }} best, Anton ---
**Author:** ![Torsten\_Utz](https://avatars.discourse-cdn.com/v4/letter/t/d78d45/32.png) [@Torsten\_Utz](https://community.hubspot.com/u/Torsten_Utz)\ **Post date:** [August 21, 2024, 8:34am UTC](https://community.hubspot.com/t/more-global-colors-in-website-theme-fields-json/114841/3 "2024-08-21T08:34:41Z")
Folgende Fehlermeldung tritt auf: [ERROR] One or more validation failed. Please fix the errors and try again. - Valid alternate\_names entries are [primary\_color, secondary\_color, heading\_font, body\_font] [field: common\_colors] - alternate\_names feature is limited to color and font field types [field: common\_colors] Das ist der Code-Ausschnitt: ```lia-code-sample { "label": "Global colors", "name": "global_colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "alternate_names": ["primary_color"], "visibility": { "hidden_subfields": { "opacity": true } }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } }, "default": { "color": "#2A262B" } }, { "label": "Secondary", "name": "secondary", "type": "color", "alternate_names": ["secondary_color"], "visibility": { "hidden_subfields": { "opacity": true } }, "inherited_value": { "property_value_paths": { "color": "brand_settings.colors[1]" } }, "default": { "color": "#0F29F2" } }, { "label": "Common colors", "name": "common_colors", "type": "group", "alternate_names": ["third_color"], "default": {}, "required": false, "locked": false, "children": [ { "name": "light_color", "label": "Light color", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } } ] } ] } ``` ---
**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:** [August 21, 2024, 9:19am UTC](https://community.hubspot.com/t/more-global-colors-in-website-theme-fields-json/114841/4 "2024-08-21T09:19:45Z")
Hi [@Torsten\_Utz](https://community.hubspot.com/t5/user/viewprofilepage/user-id/390719), **DE:** Gruppen können keine alternate\_names haben, da dies für Farben und andere Elemente vorgesehen ist. Dein Code sollte so aussehen: **EN:** Groups cannot have alternate\_names as this is intended for colours and other elements. Your code should look like this: ```lia-code-sample { "label": "Global colors", "name": "global_colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "alternate_names": ["primary_color"], "visibility": { "hidden_subfields": { "opacity": true } }, "inherited_value": { "property_value_paths": { "color": "brand_settings.primaryColor" } }, "default": { "color": "#2A262B" } }, { "label": "Secondary", "name": "secondary", "type": "color", "alternate_names": ["secondary_color"], "visibility": { "hidden_subfields": { "opacity": true } }, "inherited_value": { "property_value_paths": { "color": "brand_settings.colors[1]" } }, "default": { "color": "#0F29F2" } }, { "label": "Common colors", "name": "common_colors", "type": "group", "default": {}, "required": false, "locked": false, "children": [ { "name": "light_color", "label": "Light color", "required": false, "locked": false, "inline_help_text": "", "help_text": "", "type": "color", "default": { "color": "#ffffff", "opacity": 100 } } ] } ] } ``` best, Anton