It'd be even easier with CSS Variables. Just add a data- tag, class, etc. to your App.vue container and toggle it based on a boolean data property to change the colors throughout your entire app.
Add class is a good idea, but I think it means you must rewrite many CSS attribute. The code will be hard to read. I think we can just switch the color variables file, so that we need’t to deal with class.
It'd be even easier with CSS Variables. Just add a data- tag, class, etc. to your App.vue container and toggle it based on a boolean data property to change the colors throughout your entire app.
That's nice to know, thanks!
Add class is a good idea, but I think it means you must rewrite many CSS attribute. The code will be hard to read. I think we can just switch the color variables file, so that we need’t to deal with class.
You can have two sets of variables, no need to overwrite them. Then just toggle based on a class or data attribute. This is a great example:
dev.to/ananyaneogi/create-a-dark-l...
The only JavaScript needed is to change the root data attribute from data-theme-light to data-theme-dark and vice-versa 😉
Thank you for sharing!