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

chang themes to light mode all condition


i want to change my color default to light mode, but not working still change to system default setting (dark), how can i change that ?


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


Hi,

May I know which Metronic version are you using?

The improved dark mode support was added in Metronic v8.1.0 so we suggest you use the latest Metronic v8.1.1 to easily manage the theme modes as explained here.

Regards.



I've followed it but it doesn't work, it always follows the system settings



Hi,

If you selected a mode it saves the value in your local storage. Please clear the local store for Metronic and retry:



Regards.



same dark mode after delete that .

https://i.postimg.cc/dQ65r70h/Screen-Shot-2022-07-25-at-15-05-40.png



Hi,

Can you please check if dark-mode="dark" is it set in the login page's body tag ? Also have u placed the main theme mode init js code right after the body tag as explained here.

Regards.



I have installed dark-mode="light" but not working automate to dark mode after refresh



Hi,

Are you using Metronic v8.1.1 ? By right the dark mode should work as expected if you are using the latest Metronic v8.1.1 which has a new dark mode implementation.

Do you have any JS errors in your browser console? Have you put the theme mode init code as explained here ?

If you need any further code can u pls provide us with your test link to your ur site?

Regards.



im using metronic 8.1. and this error just into chrome, other browser working fine.



Hi,

We have no such issue reported from other users so we assume that should be in your code. Have you set the dark mode in the initial theme mode script:


const defaultThemeMode = "system";


You can change it to:

const defaultThemeMode = "dark";


To set the default theme mode to dark when your site is initially launched.

Also please double-check and make sure the localhost storage has no theme mode-related variables and they must be reset.

Regards.



Can u please confirm if you change the mode in Chrome it does not remember the selected theme mode after page reload? Do you have this issue in the original templates or in your custom page only? Have you followed the documentation and placed the main theme mode init code right after the body as explained here?


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