Can I Override HubL Theme Variables Based on a Cookie or Checkbox?

Developer Support CMS Development
, ,
1

Hello.

I’m working with a HubSpot theme where variables are set using HubL. For example, in the theme settings, there are color variables like Background, which are accessed in the templates like this:

{% set background_color = theme.color.background.color %}
Then, throughout the modules, {{ background_color }} is used to apply this color.

My question is: Is it possible to override or change this {{background_color}} dynamically based on user interaction, such as when a checkbox is checked and a certain cookie is set?

Thanks in advance!
Edit:
I know i could use css variables but i dont want to rework the entire theme so i am looking for a better solution :slightly_smiling_face:

2

Where background color is set you could use

{% if request.cookies.YourCookie== 'true' %}
{% set background_color = "#0f0f0f" %}
{% else %}
{% set background_color = theme.color.background.color %}
{% endif %}

Be warned though that using request.cookies will disable page caching.
The alternative is a javascript solution, but for that you wouldn’t be able to set what {{ background_color }} is per se. You’d need to target items by class and override it that way.

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

3

Hello,
I tried this but still doesnt seem to overwrite the color. I also think stopping page caching wouldn´t be a smart move.
The problem is that i just dont want to spend hours adding extra css to 100 modules for a highcontrast mode!
Thanks anyways!

4

Hi @BBecker1, I hope that you are well!
Thanks for getting back to us and for sharing your perspective!
I’d love to invite some of our Top Experts to this discussion: Hi @Anton, @sylvain_tirreau, @melindagreen and @evaldas do you have other suggestions to help @BBecker1, please?
Have a lovely day and thanks so much in advance for your help!
Bérangère, HubSpot Community Manager

5

Hello,

As explained above, you are trying to do something contradictory: you are trying to modify via the browser (frontend) a variable defined on the server side (backend). As already said, the only solution is to put javascript that manages the colors. You put this javascript in your footer (only once), and you will thus have a single modification for all the places where your code appears. You do not touch your cache or your theme.

6

Hi @BBecker1

Not directly. HubL runs on the server, building the page before the user ever sees it. So once the page is loaded, you can’t change HubL variables like {{ background_color }} just by interacting with the page.

But here’s what you can do: use JavaScript to change the color on the page after it’s loaded. So instead of trying to change the HubL variable itself, you just override the color in the browser.
For example:

<div id="my-section" style="background-color: {{ background_color }};">
 <!-- content -->
</div>

<button onclick="changeColor('#f5f5f5')">Light</button>
<button onclick="changeColor('#333333')">Dark</button>

<script>
 function changeColor(color) {
 document.getElementById('my-section').style.backgroundColor = color;
 }
</script>

This way, the theme color still loads as default, but the user can change it as they interact with the page.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!