Topic: Dark mode question about black and dark

byann22 priority asked 3 months ago


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.


Rafał Seifert staff answered 2 months ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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