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