Color module - usinig globally

[HPrzygoda]

Hi,

I have a question about using the color module globally.
I created a module that currently collects 4 colors:

https://prnt.sc/mTFBjDn36DJd

I would like to use this module globally and, depending on the template, use, for example, 2 colors from this module.

I have a templete page in other place and I would like to call a color from the global module:

https://prnt.sc/Ge38d-1mf5R1

Is it possible and how to do it?

Best regards,
Hanna

[Anton · Accepted solution]

Hi @HPrzygoda,

technically you can do something like this - but you can't put one module into another. 

Therefore you have to implement all colors in every module.

If you want to try this you have to create an HTML file (not a module), set your variables and include this html file in the template/module.

I think a better approach would be your own custom theme or just a theme from the marketplace since themes give you exactly those functionalities.

Pro tipp: 

You can do things like

{{ theme.colors.primary_color.color }}

in modules and templates.

Or just trigger CSS classes from a choice field to get the desired look like

<div class="card {{ module.css_class }}>
...
</div>

the coice field would look like this

Label	Value
Red	red
Green	green
Blue	blue

the theme-overwrite.css would look like this

.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}

.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}

.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}

or you can put it like this into the module HTML+Hubl area

{% require_css %}
<style>
.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}

.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}

.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}
</style>
{% end_require_css %}

or for a bit code saving like this

{% require_css %}
<style>
{% if module.css_class == "red" %}
.card.red{
background: rgba({{theme.colors.red_color.color|convert_rgb}}, {{theme.colors.red_color.opacity/100}});
}
{% elif module.css_class == "green" %}
.card.green{
background: rgba({{theme.colors.green_color.color|convert_rgb}}, {{theme.colors.green_color.opacity/100}});
}
{% elif module.css_class == "blue" %}
.card.blue{
background: rgba({{theme.colors.blue_color.color|convert_rgb}}, {{theme.colors.blue_color.opacity/100}});
}
{% endif %}
</style>
{% end_require_css %}

hope this helps

best, 

Anton