Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic 8.1.1 - Dark Mode Update


Hello!

We are using the Metronic theme for a project & would like to stay as updated as possible. Right now, we are using v8.0.38, & would like to update to v8.1.1. We don't need to dynamically change from light mode to dark mode, we just want dark mode.
Currently, we have a build script that pulls the dark mode stylesheets we need so we do not load the unused light mode styles.
Is there a way to still separate light mode & dark mode in v8.1? Or if we upgraded, would we be stuck loading a ton of the unused light styles?


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,

In Metronic 8.1 the dark mode is supported within the sase css file so no need to run a task to compile the dark mode. Instead you can run standard tasks to compile the theme assets and both dark and light modes will be available in the style bundle css file.

In your case, you just need enable the default theme mode to be dark:


<html theme-mode="dark">
</html>


And remove the theme mode init code as you can see it here.

Regards.



Yes, I understand that. But I don't want both the light & dark styles bundled into one css file. I would like them separated like it was before. Could we still do that for customers that don't want to have dynamic light/dark modes & instead want just one or the other?



Hi,

Sorry, this is not possible since Bootstrap 5.3 will release a similar dark/light mode support. Having both dark/light in the CSS would not dramatically increase the CSS file size. It's a new approach for nowadays templates and Metronic adopted it. if you use the dark mode only, technically you will not lose anything.

Regards.



Hi Sean, just because someone else did something doesn't make it correct. We would really appreciate you guys reconsidering this approach as we don't want light mode support at all. Thats just extra cruft that weighs down each page request. Ideally we are including only what we need to keep everything fast and light.



Yes, I understand that. But I don't want both the light & dark styles bundled into one css file. I would like them separated like it was before. Could we still do that for customers that don't want to have dynamic light/dark modes & instead want just one or the other?


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