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?
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
Not working with @import nested like this
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.
Check examples in stackoverflow page below: