DEV Community

Discussion on: Simple Dark Theme Switch with Vue.JS

Collapse
 
atriiy profile image
Atri

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.

Collapse
 
dinsmoredesign profile image
Derek D

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 😉

Thread Thread
 
atriiy profile image
Atri

Thank you for sharing!