referencing theme colors in module CSS

Developer Support CMS Development
1

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?

2

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

3

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

4

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 }};
...
5

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

6

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
is this the total list of what hubl is available in css files?

7

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