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):
https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html

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 mode

We would like to do it with a button or some toggle.

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,

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.

Deleted comment

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

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