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?

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

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);
}

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.

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