How to implement dark mode without refresh in Metronic8 (HTML)
Hi, my friend asked me to help him with his website, he recently bought metronic however we don't know how to implement the Dark Mode (No page refresh) mentioned in the documentation (HTML):
<a>https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html</a>
The documentation does give this Javascript code, however we don't know how to implement it.
KTApp.setThemeMode("dark", function() {
console.log("changed to dark mode");
}); // set dark mode
KTApp.setThemeMode("light", function() {
console.log("changed to light mode");
}); // set light modeWe would like to do it with a button or some toggle.
Replies (6)
How to do same thing for charts? I'm using amcharts' pie chart. When I switch to dark mode Pie charts data doesnt appear.
Hi,
You can put your Theme Mode toggle code in document ready event:
KTUtil.onDOMContentLoaded(function() {
KTApp.setThemeMode("dark", function() {
console.log("changed to dark mode");
}); // set dark mode
KTApp.setThemeMode("light", function() {
console.log("changed to light mode");
}); // set light mode
});Regards.
Thank you very much, but how do I implement it in the Toggle? I mean, how do I get the toggle to change the theme with the code you provided? I know next to nothing about Javascript
Hi,
We will prepare a working example for you. Do you need the dropdown menu to toggle the mode or just use the icon to switch to a different mode?
Regards.
Thank you very much!
I would like that just touching the icon changes the theme.
Thanks in advance
Hi,
We would suggest you use the below code:
Put this HTML code in the header's topbar:
<div class="d-flex align-items-center ms-1 ms-lg-3">
<button class="btn btn-icon btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px" >
<i class="fonticon-sun fs-2"></i>
</button>
<button class="btn btn-icon btn-icon-muted btn-active-light btn-active-color-primary w-30px h-30px w-md-40px h-md-40px d-none" >
<i class="fonticon-moon fs-2"></i>
</button>
</div>Put this code in your global JS scope:
KTUtil.onDOMContentLoaded(function() {
var darkModeToggle = document. querySelector("#theme_mode_dark");
var lightModeToggle = document. querySelector("#theme_mode_light");
darkModeToggle.addEventListener("click", function() {
KTApp.setThemeMode("dark", function() {
darkModeToggle.classList.add("d-none");
lightModeToggle.classList.remove("d-none");
});
});
lightModeToggle.addEventListener("click", function() {
KTApp.setThemeMode("dark", function() {
darkModeToggle.classList.remove("d-none");
lightModeToggle.classList.add("d-none");
});
});
Please make sure that dark mode CSS files are generated as explained here:
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html
Regards.Regards
