Using CSS Variables to Dynamically Change Theme Colors with JavaScript and Vue.js
I've tried everything I can think of but I've been researching this but I'm trying to implement a feature in my Vue.js application where users can switch between light and dark themes using CSS variables, but I'm running into an issue where the styles don't update correctly across all components. I set up my CSS variables like this: ```css :root { --primary-bg: white; --primary-text: black; } dark-theme { --primary-bg: black; --primary-text: white; } ``` In my Vue component, I toggle the class on the `body` element like so: ```javascript methods: { toggleTheme() { document.body.classList.toggle('dark-theme'); } } ``` However, when I switch themes, some components do not reflect the new styles immediately. For instance, a button that uses these variables for background and text color doesn't seem to update at all until I refresh the page. Here's how I apply the variables in my CSS: ```css button { background-color: var(--primary-bg); color: var(--primary-text); transition: background-color 0.3s, color 0.3s; } ``` I've also ensured that the transition properties are set, but the button still flickers or sometimes retains the old styles until a full re-render happens. I’ve tried using Vue's reactivity system to force a re-render by updating a reactive property whenever the theme is toggled, but that hasn't resolved the issue. Is there a way to ensure that all components reflect the theme changes instantly without having to refresh the page? Are there best practices around using CSS variables with Vue.js that I might be missing? I’m currently using Vue 3 and Chrome 91. Thanks for any help you can provide! I'm using Javascript latest in this project. Is there a better approach?