Have local storage value change all components without page refresh
I have a number of components set up with dark mode now and did some trial runs using page variables , which were working great i .e . everything changed as needed upon clicking the dark mode button . To avoid duplication , I have now set up my sidebar component to set an object in local storage { "dark-mode": "true" } when the sidebar dark mode button is clicked . A click event has been set up within the button component to change the value from mode from true to false and update local storage , which is working great . Each time I click the sidebar button , the sidebar updates but I have to refresh the page to get all other components to adopt the right state . The other components are set up to get the value from local storage as well but I think there needs to be some event on each component that changes the state but I 'm not sure how to achieve that without refreshing . I 'm trying to avoid individual page variables where possible and keep things simple . I have tried using an attribute on each component that gets the value from local storage and fire an attribute change event within the component but it still requires a refresh . I have also tried just setting the dark mode variable internally within the component based on local storage value but that also requires a refresh . Any ideas ? ✅1Wee loom showing some of the internals . Maybe I just trigger refresh of the page from click event ? Is that the solution ? https://www.loom.com/share/a732e4370d4f4139beae869a01e5f936?sid=38d883b2-24e4-4de7-bd8b-02b398c2bcb3 Unlike toddle data , local -storage doesn 't signal updates to subscribers (other components ) , so you have to do this yourself 🙀 on top of saving to local -storage . We have an exciting new feature coming up in the beginning of next year 🎆 that can handle something like this perfectly . In case you can wait a bit . For now , I suggest you create a variable theme on your page and update it at the same time as you update local -storage . It 's initial value should be read from local -storage . You can pass your theme as an attribute to the components that needs it , so they can update to the live data . Please let me know if this doesn 't work , I 'll be happy to help 👍 Your solution of reloading the page could also work as a temporary solution , but it won 't feel great for users as you may loose context and have to wait for a full page reload . Thanks for the update , @Jacob Kofoed . Good to hear some things are in the works ! 🙌 I can confirm that setting a page variable and having a click event on the sidebar trigger the variable update on the page works perfectly . Looks like I just need to set this variable up for each page just now and set each component attribute to that variable . I did try the page reload but it was a bit crap tbh - slight delay as things were being updated , but with the page variable change it 's instant . 🪄 🥳1
.jpeg/public)