How can I add the new "Dark Mode" toggle?
How can I pull the new dark/light mode toggle from your latest update?
1) Is there a javascript file that needs to be updated?
2) What CSS file(s) need to be updated?
3) What script do I need in order to actually toggle the dark/light modes?
Replies (4)
Here's one of the things that I did:
I replaced assets/css/style.bundle.css with the new one from the latest updates you published.
Then I noticed that the following code works:
<script>
if ( document.documentElement )
{
const defaultThemeMode = "system";
const name = document.body.getAttribute("data-kt-name");
let themeMode = localStorage.getItem("kt_" + ( name !== null ? name + "_" : "" ) + "theme_mode_value");
if ( themeMode === null )
{
if ( defaultThemeMode === "system" )
{
themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
else
{
themeMode = defaultThemeMode;
}
}
document.documentElement.setAttribute("data-theme", themeMode);
}
</script>
HOWEVER - Now my aside menu disappeared....
Hi,
Are you using the new Metronic 8.1 HTML and CSS files ?
It seems your HTML code or CSS file is not updated. You may also check our ASP.NET Core 8 Starter Kit with working Dashboard and authentication pages.
Regards
I only replaced that css file...
I used the previous version and started customizing those files. Guess that teaches me to make sure I leave myself an upgrade path
Please get the HTML code updates as well since the new Metronic 8.1 comes with Bootstrap 5.2 update that has some major changes also due to the design improvements of demo1 we used the HTML structure and CSS class names also changed.
