Switch to dark and light mode on demand - React Demo1

Hi,

I'd like to have a sun and moon Icon on the header and let visitors switch btw dark and light mode easily.

Any advice?

Thanks

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 Sam,

The dark and light mode styles are located inside different style files. It makes dynamic theme switch functionality implementation so hard.

To implement it now, you will need to wrap all dark mode styles with some class and then add and disable this class for body tag when the user clicks a switch button.

Hi Lauris.

Thanks for the clarification, I just want to be sure if I am on the right path, I am using angular version of metronic v8.0.34, I decided to have a switch between light and dark mode and follow your instructions but I feel like I'm doing something wrong.

Is it really all the elements (i.e dropdown menu, input field, textarea, tabs, borders, etc.) I need to target their classes and update their corresponding values when I toggle to light mode?
Seems like an amount of time is needed to be able to accomplished this and I feel like I'm doing something wrong.


The image here best describes what I meant

From dark theme to light theme
https://ibb.co/gd5qcSN


Thank you so much for reading, I hope you enlighten me with this.

To give you an overview here is what I have done

body.light-mode {
--gray-100: #F5F8FA;
--gray-200: #EFF2F5;
--gray-300: #E4E6EF;
--gray-400: #B5B5C3;
--gray-500: #A1A5B7;
--gray-600: #7E8299;
--gray-700: #5E6278;
--gray-800: #3F4254;
--gray-900: #181C32;
--page-bg: var(--gray-100);
--header-bg: var(--white);
--toolbar-bg: var(--white);
--border: 1px solid var(--gray-200);
--footer-bg: #{$white};
.card {
background-color: #{$white};
.card-header {
border-bottom: 1px solid var(--gray-200);
}
}
.text-gray-600 {
color: var(--gray-600);
}
.nav-line-tabs .nav-item .nav-link {
color: var(--gray-500);
}
.col-form-label {
color: var(--gray-800);
}
.footer {
background-color: var(--footer-bg);
}
.......other elements here
}


Hello Lauris, Am I on the right path? Actually I'm in doubt since I have to type all the necessary elements that needs to be change when in light mode (since I choose the dark mode as default).

Seems like a pain typing all this elements.

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