Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(