Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Aside menu is not change with dark mode in Metronic theme


Hi everyone,
the color of aside menu is not change with dark mode ?? why ??
here --> https://preview.keenthemes.com/metronic8/demo4/index.html?mode=light
, aside menu change to dark color, but with my app is still with light color..
please ,, can you help me ??


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,

If the color of the aside menu is not changing with dark mode in your Metronic theme, please try clearing your browser cache. Sometimes, cached stylesheets can prevent the changes from being applied.

Additionally, make sure you have followed the dark mode settings correctly. You can refer to the Metronic documentation for more information on enabling and customizing dark mode:
https://preview.keenthemes.com/html/metronic/docs/getting-started/dark-mode

If the issue persists after clearing the cache and checking the documentation, you may want to review your theme configuration or seek assistance from our support for further troubleshooting.



Ok, but now aside-bg-color is not change with my custom color,
css style:
[data-bs-theme=light] {
--bs-page-bg: #F3F6F9;
--bs-app-blank-bg: #ffffff;
--bs-header-default-bg-color: #ffffff;
--bs-header-fixed-bg-color: #ffffff;
--bs-header-fixed-box-shadow: 0px 10px 30px 0px rgba(82, 63, 105, 0.05);
--bs-aside-bg-color: #8950FC;
}
--bs-aside-bg-color --> is not change , but when I back to demo4 in this link --> https://preview.keenthemes.com/metronic8/demo4/index.html?mode=light ,
it is working (--bs-aside-bg-color) in your demo ,
what can I do? noted I always clear my browser cache,,
thank you for your support



Hi,

May I know which Metronic version are you using ? The recent v8.2.1 works fine as you can check in the live preview here. Is the issue with your own customized version or original version that you have downloaded ?

Regards.



Hi Sean, thank for your response,
yes, the version is different, and I solved the issue,

thank you for your support,



Hi,

Great! Glad to hear that. If you need any further help please do let us know.

Fueling Metronic's future is easy! Spread the word among your connections and help our sales grow, it allows us to reinvest even more into Metronic, bringing you even more exciting features and updates in the future.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(