# Style fields parameters

**URL:** <https://community.hubspot.com/t/style-fields-parameters/120341>\
**Category:** CMS Development\
**Tags:** local-development\
**Created:** [November 12, 2024, 5:38pm UTC](https://community.hubspot.com/t/style-fields-parameters/120341 "2024-11-12T17:38:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![NicolasBrito](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NicolasBrito](https://community.hubspot.com/u/NicolasBrito)\
**Post date:** [November 12, 2024, 5:38pm UTC](https://community.hubspot.com/t/style-fields-parameters/120341/1 "2024-11-12T17:38:46Z")

</div>

Hello everyone!

I’m currently working on a project that requires me to do style fields and I’m struggling to find the parameters to use on the values on the fields i.e. the color of a font inside {{ module.style.font\_field.font }} ( a font style field containing more than just a color). Is there a list or any way to know more of those? I haven’t been able to find it in the documentation.

---

<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:** [November 12, 2024, 6:37pm UTC](https://community.hubspot.com/t/style-fields-parameters/120341/2 "2024-11-12T18:37:28Z")

</div>

Hi @NicolasBrito,

the default font-field supports only one color since this is in 99.9% the way to go.  
Since it sounds like you’re about to create something like a gradient or light-/dark-color mode.  
My recommendation for creating custom color stylings is this:

- don’t use the font field at all or disable all options besides the font-family(if this is a thing for you)
- add number fields to create different font sizes
- add color fields to provide light-/dark- colors
- add gradient-field or make your own out of some color&number fields inside a repeater-group
- write your own CSS

**Examples:**

A font-field with only the font-family select option

```lia-code-sample
{
				"name": "headlines",
				"label": "Headlines",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"load_external_fonts": true,
				"type": "font",
				"visibility": {
					"hidden_subfields": {
						"size": true,
						"color": true,
						"underline": true
					},
					"controlling_field": "fonts.font_source",
					"controlling_value_regex": "google",
					"operator": "EQUAL"
				},
				"default": {
					"size": 12,
					"font": "Lato",
					"font_set": "GOOGLE"
				}
			},

```

The corresponding CSS:

```lia-code-sample
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
 font-family: {{ theme.fonts.headlines }};
}

```

Custom gradient JSON:

```lia-code-sample
{
		"name": "custom_gradient",
		"label": "Custom gradient",
		"required": false,
		"locked": false,
		"children": [
			{
				"name": "angle",
				"label": "Angle",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "°",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 360,
				"inline_help_text": "",
				"help_text": "",
				"default": 45
			},
			{
				"name": "color_1",
				"label": "Color 1",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "color_1_position",
				"label": "Color 1 position",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "%",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 100,
				"inline_help_text": "",
				"help_text": "",
				"default": 0
			},
			{
				"name": "color_2",
				"label": "Color 2",
				"required": false,
				"locked": false,
				"inline_help_text": "",
				"help_text": "",
				"type": "color",
				"default": {
					"color": "#ffffff",
					"opacity": 100
				}
			},
			{
				"name": "color_2_position",
				"label": "Color 2 position",
				"required": false,
				"locked": false,
				"display": "slider",
				"suffix": "%",
				"step": 1,
				"type": "number",
				"min": 0,
				"max": 100,
				"inline_help_text": "",
				"help_text": "",
				"default": 100
			}
		],
		"type": "group",
		"inline_help_text": "",
		"help_text": "",
		"default": {}
	}

```

Custom gradient macro(seperate file; can be used on every element; not just text):

```lia-code-sample
{# linear gradient #}
{%- macro linear_gradient(angle, color_1, position_1, color_2, position_2) -%}
 background: {{ color_1 }};
 background: -moz-linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 background: -webkit-linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 background: linear-gradient({{angle}}, {{color_1}} {{position_1}}%, {{color_2}} {{position_2}}%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="{{color_1}}",endColorstr="{{color_2}}",GradientType=1); 
{%- endmacro -%}​

```

CSS:

```lia-code-sample
{% include "./PATH-TO-THE-MACRO-FILE.css" %}
...

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
 {{ linear_gradient(theme.custom_gradient.angle, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%)}}
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.gradient-bg{ {# just an example how to use the gradient for backgrounds #}
{{ linear_gradient(theme.custom_gradient.angle, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%, theme.custom_gradient.color_1.css, theme.custom_gradient.color_1_position%)}}
}
{# change "theme.custom_gradient" to the path where you're putting the group into #}

```

For light-/dark- colors:

Simply add two(or the desired amount of colors) into your fields and write the code like this:

```lia-code-sample
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6,
.dark .h1,.dark .h2,.dark .h3,.dark .h4,.dark .h5,.dark .h6{
 font-family: {{ theme.fonts.headlines }};
 color: {{ theme.fonts.dark_color.css }};{# PATH-TO-THE-DARK-COLOR #}
}

.light h1,.light h2,.light h3,.light h4,.light h5,.light h6,
.light .h1,.light .h2,.light .h3,.light .h4,.light .h5,.light .h6{
 font-family: {{ theme.fonts.headlines }};
 color: {{ theme.fonts.light_color.css }}; {# PATH-TO-THE-LIGHT-COLOR #}
}

```

best,

Anton

---

<div class="post-metadata">

**Author:** ![NicolasBrito](https://avatars.discourse-cdn.com/v4/letter/n/ecc23a/32.png) [@NicolasBrito](https://community.hubspot.com/u/NicolasBrito)\
**Post date:** [November 12, 2024, 7:20pm UTC](https://community.hubspot.com/t/style-fields-parameters/120341/3 "2024-11-12T19:20:11Z")

</div>

Actually more than a solution I was asking for a documentation where I can see all the available attributes for style fields

---

<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:** [November 12, 2024, 10:55pm UTC](https://community.hubspot.com/t/style-fields-parameters/120341/4 "2024-11-12T22:55:31Z")

</div>

HEy @NicolasBrito,

gotcha.  
Here’s the [style fields doc](https://developers.hubspot.com/beta-docs/reference/cms/fields/module-theme-fields) and the one for [the color field](https://developers.hubspot.com/beta-docs/reference/cms/fields/module-theme-fields#color)

best,

Anton