How can I dynamically switch light/dark mode
I have demo 2 up and running. I cannot toggle the dark theme by adding "dark-mode" to the body's class list.
I've also tried to load both styles (dark and light) in App.vue. At first it seems like that this works but this also seems to break a lot of things.
What would be the recommended way of switching modes in demo 2?
Replies (4)
Hi Florian!
You can wrap dark and light styles with some class and then switch a class when the user changes a theme mode.
I have tried that. It breaks the style. I wrapped the imports in their own classes and applied either light or dark class to body. It does not really work. Diagram colors break,etc.
Working with direct @import
<img src="https://i.epvpimg.com/bDZXfab.png" width="600" />
Not working with @import nested like this
html {
@import ...
}<img src="http://i.epvpimg.com/or4bdab.png" width="600" />
Hi Florian!
By using this approach some classes might not work.
Another solution that you can use is to add a webpack script to bundle dark and light mode sass separately and then connect them directly to public/index.html file.
Then you should be able to toggle these style files from your javascript code.
Check examples in stackoverflow page below:
https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript
