Metronic 8.1.7 Vue version dardk mode ElementPlus

Hi, earlier version like 8.1.4 has this already covered.
Again switching to dark mode - element plus still light
The same with SweetAlert.

Can you please give me a tip to fix both?

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 (5)

Hi Krystian,

Thank you for reaching out to us.

Element Plus dark mode support was added in Metronic v8.1.3 release.

Please make sure that you have @import "assets/sass/element-ui.dark"; style import in your src/App.vue.

For SweetAlert, it seems like some styles are missing in current Metronic version, we will check this problem in more detail and include fix in the next Metronic releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Hi Lauris,

this is the fresh install of v8.1.7
the element-ui.dark is imported.
You can see this on the demo page as well
https://preview.keenthemes.com/metronic8/vue/demo5/#/apps/calendar

Hi Krystian,

Thank you for you feedback.

There is two issues with our styles which couses those mistakes in dark mode.


  1. To fix element ui elements in dark mode you need to update selector in file assets/sass/element-ui.dark.scss
    Change attribute selector from data-theme="dark" to data-bs-theme="dark". Those attributes are already updated in demo1, you can refer to element-ui.dark.scss file in demo1.

  2. To fix SweetAlert in dark mode you need to replace all Swal instance imports.

    Globally replace import Swal from "sweetalert2"; to import Swal from "sweetalert2/dist/sweetalert2.js";


Regards,
Lauris Stepanovs,
Keenthemes Support Team

Lauris, this is fantastic happy
Thank you.
The same import as you mentioned on SignIn.vue works but on some modal e.g. on calendar not. When you open modal and just try to submit sweetalert pops up. Still white on dark mode.

https://preview.keenthemes.com/metronic8/vue/demo1/#/apps/calendar

Hi Krystian,

Please make sure that you have updated all imports used in project.

You can use your code editor global searach and replace functionality to find and replace all import Swal from "sweetalert2"; to import Swal from "sweetalert2/dist/sweetalert2.js";.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

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