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?

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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

Not working with @import nested like this

html {
@import ...
}

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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(