Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Metronic 9 theme change not working


Hi! I've just setup Metronic with Vue and followed the guide in the docs. I'm trying to change the theme to 'dark', but nothing is working.

I've tried adding a data-theme-mode attribute to <html>. I've also tried changing the defaultThemeMode to 'dark' or manually adding a 'dark' class to <html>.

Any idea if this is a bug?


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)


While playing Eggy Car players often need to manage their time effectively to advance through levels. This can help develop better time management skills that are useful in both personal and professional settings.


Deleted comment

For reference, I followed this guide: https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/frontend/vue



Hi,

Thank you for reaching out to us.

Inside the user dropdown, we have a theme mode switch, which you can use to change the theme mode.

To get more information about using theme mode in our documentation.
https://keenthemes.com/metronic/tailwind/docs/components/theme

Also, please let us know if you have any errors in your console.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Thanks for sharing! Where do I change the default theme?



Hi,

By default, the theme mode value is taken from local storage, if you do not have any value stored in local storage then you can set defaultMode inside index.html variable defaultThemeMode. See example - https://github.com/keenthemes/metronic-tailwind-html-integration/blob/main/metronic-tailwind-vue/index.html

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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