topic Re: referencing theme colors in module CSS in CMS Development

referencing theme colors in module CSS

isiwebdev — Tue, 17 Mar 2026 19:14:14 GMT

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

{ "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?

Re: referencing theme colors in module CSS

STierney — Tue, 17 Mar 2026 19:12:23 GMT

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, and @HFisher7 - any thoughts here?

Shane, Senior Community Moderator

Re: referencing theme colors in module CSS

Anton — Tue, 17 Mar 2026 19:32:44 GMT

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

best,

Anton

Re: referencing theme colors in module CSS

isiwebdev — Tue, 17 Mar 2026 19:51:49 GMT

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?

... background-color: {{ theme.group.group_colors.group_base_colors.color_2.color }}; ...

Re: referencing theme colors in module CSS

Anton — Tue, 17 Mar 2026 21:25:45 GMT

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

{% 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

.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

Re: referencing theme colors in module CSS

isiwebdev — Tue, 17 Mar 2026 22:45:21 GMT

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 https://developers.hubspot.com/docs/cms/reference/modules/files

is this the total list of what hubl is available in css files?

Re: referencing theme colors in module CSS

Anton — Wed, 18 Mar 2026 07:53:13 GMT

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