# referencing theme colors in module CSS

**URL:** <https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [March 17, 2026, 6:54pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371 "2026-03-17T18:54:31Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![isiwebdev](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isiwebdev](https://community.hubspot.com/u/isiwebdev)\
**Post date:** [March 17, 2026, 6:54pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/1 "2026-03-17T18:54:31Z")

</div>

I am attempting to build a module that will use the theme’s “Base Color 2” in the module’s css file. i cannot find anywhere in documentation that talks about the rules for syntax in the module’s fields.json to set the default color to the theme’s “Base Color 2”. i am using the elevate theme. i have tried several iterations of “theme.group.group\_colors.group\_base\_colors.color\_2.color” all make the upload barf with

[ERROR] HubSpotHttpError: The post in account 51183775 was bad. internal error  
- group.group\_colors.group\_base\_colors.color\_2.color is not a valid path to a default property  
- theme.group.roup\_colors.group\_base\_colors.opacity is not a valid path to a property  
- theme.group.group\_colors.group\_base\_colors.color is not a valid path to a property

here is the field in my module’s fields.json

```lia-code-sample
{
 "id" : "ab6d16db-f107-9a01-fd66-575c2c69beef",
 "name": "background_color",
 "type": "color",
 "label": "Background Color",
 "inherited_value": {
 "default_value_path": "theme.group.group_colors.group_base_colors.color_2.color",
 "property_value_paths": {
 "color": "theme.group.group_colors.group_base_colors.color",
 "opacity": "theme.group.roup_colors.group_base_colors.opacity"
 }
 }
}

```

where in the documentation are the rules for this syntax described?

---

<div class="post-metadata">

**Author:** ![STierney](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stierney/32/186066_2.png) [@STierney](https://community.hubspot.com/u/STierney)\
**Post date:** [March 17, 2026, 7:12pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/2 "2026-03-17T19:12:23Z")

</div>

Hey @isiwebdev,  
Thanks for posting in the Community!  
I’d like to tag in some Community experts to see what insight they may have on the rules for this syntax! @Anton, [@Syeda\_Fatima](https://community.hubspot.com/t5/user/viewprofilepage/user-id/114957), and @HFisher7 - any thoughts here?  
Shane, Senior Community Moderator

---

<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:** [March 17, 2026, 7:32pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/3 "2026-03-17T19:32:44Z")

</div>

Hey @isiwebdev,

modules unfortunately can’t inherit theme settings by default.  
Think of themes and modules like self contained containers. A theme can technically contain 0 modules and a module doesn’t require a theme.

If you want global inheritace, you can use instead is the [brand kit inheritance](https://developers.hubspot.com/docs/cms/start-building/building-blocks/fields/brand-and-settings-inheritance#brand-settings-inheritance)

best,

Anton

---

<div class="post-metadata">

**Author:** ![isiwebdev](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isiwebdev](https://community.hubspot.com/u/isiwebdev)\
**Post date:** [March 17, 2026, 7:51pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/4 "2026-03-17T19:51:49Z")

</div>

am i able to directly reference a theme’s colors in the module’s css? it seems really clunky to have to copy/paste theme colors into each and every module instance that would appear on a website.

would i use that same dot-path to use the theme’s color in the css template?

```lia-code-sample
...
background-color: {{ theme.group.group_colors.group_base_colors.color_2.color }};
...

```

---

<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:** [March 17, 2026, 9:25pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/5 "2026-03-17T21:25:45Z")

</div>

Haven’t tried it in quite some time as I got a whole different approach, but it should be possible, yes.

Unless you create a different approach yourself, you need to use the same “dot-path”

Advanced tip:  
You can create HubL objects (not a very documented approach) like

```lia-code-sample
{% set module_styles = {
 "bg_color" : theme.group_1.group_2.group_3.bg_color.css,
 "text_color" : theme.group_1.group_2.group_3.text_color.css}
%}

```

at the top (recommended) of a module

and then use it like

```lia-code-sample
.myDiv{
 background-color: {{ module_styles.bg_color }};
 color: {{ module_styles.text_color }};
}

```

but make sure that it won’t share the same labels/names as something else in the module as it will colide.

But the proven/easy-to-use approach is to put all global theme settings into one dedicated file like **theme-overrides.css**

There are many other different undocumented approaches and you can try things out, but if you want to get started quickly, I’d stick to the theme-overrides/boilerplate approach

best,

Anton

---

<div class="post-metadata">

**Author:** ![isiwebdev](https://avatars.discourse-cdn.com/v4/letter/i/a3d4f5/32.png) [@isiwebdev](https://community.hubspot.com/u/isiwebdev)\
**Post date:** [March 17, 2026, 10:30pm UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/6 "2026-03-17T22:30:52Z")

</div>

it appears that if i use the {% set … %} in the module.html i can use it in the module.html. it looks like i cannot, however, reference any of them in the module’s css file. from what i had read in docs; you can use the jinja style code in the css files but it was unclear as to what, exactly, is accessible in the CSS files. I had asked the doc AI some questions about it but every single suggestion it had was wrong. is there documentation as to what is accessible in the CSS files?

there are some examples at [Coding Custom Modules - HubSpot docs](https://developers.hubspot.com/docs/cms/reference/modules/files)  
is this the total list of what hubl is available in css files?

---

<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:** [March 18, 2026, 7:50am UTC](https://community.hubspot.com/t/referencing-theme-colors-in-module-css/147371/7 "2026-03-18T07:50:05Z")

</div>

Yes,

HubL works only inside the module.html, but not module.css or module.js.

However HubL works in “regular” CSS files outside of modules.

example structure of files:

- theme
  - CSS (folder)
    - some\_css.css (HubL works here)

  - modules (folder)
    - button (module)
      - module.html (HubL works)
      - module.css (HubL doesn’t work)
      - module.js (HubL doesn’t work)
      - meta.json (HubL doesn’t work; _only accessible via local dev_)
      - fields.json (HubL doesn’t work; _only accessible via local dev_)

  - templates (folder)
    - some\_html.html (HubL works)

  - js (folder)
    - some\_js.js (HubL works)

  - theme.json (HubL doesn’t work)
  - fields.json (HubL doesn’t work)

edit:

If you use {% set %}, it will work only in the module.html

best,  
Anton