Detect OS theme and apply Dark Mode
Good morning 
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)
Replies (3)
Good morning! Yes, it’s definitely possible to detect the user's operating system theme using the @media (prefers-color-scheme: dark) query. This allows you to apply the Metronic dark theme automatically without needing to load both light and dark CSS styles. I was thinking about how this could be really useful for a site like Chipotle’s, especially when showing the bestchipotlemenu in both light and dark themes for a more personalized user experience. It’s a small change, but it makes a big impact!
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 <script> 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.
