Black Friday Super Sale! Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Both dark and light modes in scss with vue


Hi,

I want to make a live theme switch in my app.
How can I compile both dark and light themes into 1 css file?
I'm using vuejs.

Thanks.


user
Denis O 3 years ago
Vue
10 Answers
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 (10)

user
smithson harold 1 year ago

You can define CSS variables for both dark and light themes. This allows you to switch between themes by toggling a root class or data attribute or slope game.


user
Denis O 3 years ago

Could you please give some time estimate? How "soon"?
Thank you.


user
Sean Author 3 years ago

This will ship in the next update Metronic v8.1 in the coming days.


user
Denis O 3 years ago

Any updates...?


user
Sean Author 3 years ago

It will be out within this week. We are preparing the update for release.


user
Denis O 3 years ago

Any updates...?


user
Sean Author 3 years ago

Hi happy,

Yes, we have just released Metronic v8.1

Regards


user
Denis O 3 years ago

Great 👍
But where can I find documentation on how to use the theme switcher?


user
Sean Author 3 years ago

The theme switcher is integrated into the demos' header part and you can learn more about the theme mode here.


user
Sean Author 3 years ago

Hi,

Currently, our dark and light modes use separate SASS files, and compiling them into one is not supported. However, we will provide a solution for this very soon. Stay tuned for new updates.

Regards.


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  :(