Topic: Dark mode question about black and dark
Hi,
I use the light and dark theme feature.
I'd like to know why 'dark' and 'black' colors or not automatically inversed in 'white' when in dark mode.Maybe there is a reason that I've not taken into account !?
For intance:
<div class="text-dark">text-dark</div>
<div class="text-black">text-black</div>
<div class="text-900">text-900</div>
<div class="text-300">text-300</div>
In dark mode, text-900 and text-300 are correctly in white, but dark and black are not.What is the simpliest method to change this for all h1, h2 ... please?
h1, h2.... { color: $dark} // always dark in dark mode
or:
h1, h2.... { color: $gray-900} // always dark in dark mode
Thanks in advance for your reply.
text-dark, text-white etc. classes have !important flag and a static value. They are not flexible with theming. In your case I would remove those classes from h1, h2 elements. If you want some custom color for light/dark theme you could add something like this in your global styles.scss file assuming you are toggling dark class on body element:
body.dark {
h1,
h2 {
color: lightcyan;
}
}
body:not(.dark) {
h1,
h2 {
color: darkblue;
}
}
Let me know if that helps you.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 6.0.0
- Device: Laptop PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No