CSS Variables Not Updating in Live Preview with Svelte 3
I'm optimizing some code but I'm reviewing some code and I'm relatively new to this, so bear with me. I've been struggling with this for a few days now and could really use some help. I'm working on a Svelte 3 component where I'm trying to use CSS variables for theming. I set some CSS custom properties in a `<style>` block and attempt to update them dynamically using Svelte's reactivity, but the changes don't appear to take effect in the live preview. Here’s a simplified version of my code: ```html <script> let primaryColor = '#3498db'; function changeColor() { primaryColor = '#e74c3c'; } </script> <style> :root { --primary-color: {primaryColor}; } .button { background-color: var(--primary-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; } </style> <button class="button" on:click={changeColor}>Change Color</button> ``` When I click the button, I expect the button’s background color to change to red, but it remains the same blue. I checked the Svelte documentation and confirmed that reactivity should update the variable, but the CSS variable doesn't seem to reflect the new value. I tried using inline styles directly in the HTML instead of CSS variables, and that works fine, but I want to maintain the theme flexibility that CSS variables provide. Is there a way to make this work with CSS variables in Svelte 3? Any help would be greatly appreciated! I'm working on a service that needs to handle this. I'm working on a application that needs to handle this. Is this even possible? The stack includes Html and several other technologies. I'd be grateful for any help.