Persistent variable change between pages

Design help Custom code
1

Hi all!

I’ve setup an interaction that shifts the primary colour of my site by changing a colour variable (–lee–colour–primary-variable). The interaction works fine, however, the variable resets every time the user goes to a new page. (To see it in action, the colour toggles are at the bottom right-hand side of the viewport)

I assume the right custom code would allow this value to be stored across pages, but is beyond my skill level. Any help (and step-by-step instructions) for any solutions would be most appreciated!

Cheers!

2

I can’t give you step-by-step without some work but if you do some rounds with chat GPT you should be able to get what you need.

Here’s the structure;

On every page load in body;

  • install click event handlers on each of your color selectors

Click event handler;

  • pulls the color RGB from the clicked selector, via a custom attribute
  • sets a sessionStorage var with the RGB color

On every page load in head;

  • check sessionStorage for the var, and set the CSS var

This should give you a pretty seamless experience where the color is applied before much of the page loads.