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?
Replies (6)
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
<a>https://preview.keenthemes.com/metronic8/vue/demo5/#/apps/calendar</a>
Hi Krystian,
Thank you for you feedback.
There is two issues with our styles which couses those mistakes in dark mode.
- To fix element ui elements in dark mode you need to update selector in file
assets/sass/element-ui.dark.scss
Change attribute selector fromdata-theme="dark"todata-bs-theme="dark". Those attributes are already updated in demo1, you can refer toelement-ui.dark.scssfile in demo1. - To fix SweetAlert in dark mode you need to replace all Swal instance imports.
Globally replaceimport Swal from "sweetalert2";toimport Swal from "sweetalert2/dist/sweetalert2.js";
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Lauris, this is fantastic 
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
Hello Lauris!
I'm using the Metronic Vue version 8.1.8 demo7.
The two suggestions you provided have already been fixed in this version. However, I still have the same issue with SweetAlert.
It works correctly on the login page, but when I execute it within /src/views/apps/customers/CustomersListing.vue, it appears with a white background in dark mode.
I performed the following test:
onMounted(() => {
Swal.fire({
text: "Success",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok",
heightAuto: false,
customClass: {
confirmButton: "btn btn-primary",
},
}).then(() => {
});
});
