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

Can't switch to Dark Mode in Demo build


Hi,

I've just downloaded a copy of Metronic 8 (Demo 1). I've got it running on localhost and I'm successfully able to modify some variables in the _variables_custom.scss file.

But when I try to switch to Dark Mode using the switch in the top right of the UI, the switch doens't work. All that happens is a page reload. And when check the toggle switch it has returned back to Light.

Have I missed a step?

I realise there are some instruction on this page:
https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode

Am I supposed to be manually adding these things?? I've tried but doesn't seem to help.

Slightly confused, as I was expecting dark mode to work straight out of the box.


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


Hi,

As per our checking the dark mode switch works fine in the original code metronic_html_v8.1.8_demo1/demo1/dist/index.html.

If you have modified the code and after that, it stopped working please try to double-check your code and keep the dark mode-related code part as per the original theme.

if you need any further help please provide us more info, your OS and browser version and also double check the original theme if its working as expected.

Regards.



thanks for the reply Sean. The version I'm using is 8.0.26.

Can you please confirm - is dark mode supposed to work without any special configuration/commands run?


Or do we need to work through instructions on this page:
https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode. When I look at one of KeenThemes videos on Dark mode from a year ago, it seems that the setup instructions differed from the early versions of V.8 to the latest??
The version im using has a seperate style.dark.bundle.css, while it seems that has been removed in the latest release?

fyi - i have not changed any code at all from a newly downloaded copy of 8.0.26



Hi,

Please try to use the latest Metronic v8.1.8 version for your app as the dark mode was enabled in the recent updates and current dark mode <a href="https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode">docs<a/> are compatible with the latest Metronic version.

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