Detect OS theme and apply Dark Mode

Good morning happy I would like to know if it is possible to detect the user's operating system theme and automatically apply (if applicable) the metronic dark theme.

I say this to avoid putting together both metronic css styles and use:

@media (prefers-color-scheme: dark)

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

Edit:
I tried this and it works, but it interferes with my button code to switch to dark mode manually.
Javascript code to detect OS theme:

let darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (darkMode) {
KTApp.setThemeMode("dark", function() {});
} else {
KTApp.setThemeMode("light", function() {});
}

Javascript code of the button:
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("light", function() {
darkModeToggle.classList.remove('d-none');
lightModeToggle.classList.add('d-none');
});
});
});

HTML code of the button:
<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>

I placed the code to detect the OS theme and my manual button javascript code (The separate codes) and as I said, it works, but:
-If it is placed in Dark mode automatically and the manual button is tapped to change it to Light, the button does not work.

Thank you in advance.

Hi,

Detecting the system mode is possible only via Javascript and using the page loading indication you can implement javascript code that detects the system mode and stores in it Cookie to pass to your server-side next pages will be loaded with dark mode CSS generated in the server side.

The toggle issue can be solved by properly showing/hiding the toggle buttons when you detect the system mode:

let darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (darkMode) {
KTApp.setThemeMode("dark", function() {
darkModeToggle.classList.add('d-none');
lightModeToggle.classList.remove('d-none');
});
} else {
KTApp.setThemeMode("light", function() {
darkModeToggle.classList.remove('d-none');
lightModeToggle.classList.add('d-none');
});
}

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