Lux 5.1.2 h* handling font color inside bg-*

[ekrichbaum]

h2 (for example) is borked inside of elements with bg-primary (for example).

In lux, the h* color is set:

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1a1a1a;
}

which causes very dark on dark. Several other themes deal with that in:

.bg-danger .h1, .bg-danger .h2, .bg-danger .h3, .bg-danger .h4, .bg-danger .h5, .bg-danger .h6, .bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5, .bg-danger h6, .bg-dark .h1, .bg-dark .h2, .bg-dark .h3, .bg-dark .h4, .bg-dark .h5, .bg-dark .h6, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-info .h1, .bg-info .h2, .bg-info .h3, .bg-info .h4, .bg-info .h5, .bg-info .h6, .bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5, .bg-info h6, .bg-primary .h1, .bg-primary .h2, .bg-primary .h3, .bg-primary .h4, .bg-primary .h5, .bg-primary .h6, .bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6, .bg-success .h1, .bg-success .h2, .bg-success .h3, .bg-success .h4, .bg-success .h5, .bg-success .h6, .bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5, .bg-success h6, .bg-warning .h1, .bg-warning .h2, .bg-warning .h3, .bg-warning .h4, .bg-warning .h5, .bg-warning .h6, .bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5, .bg-warning h6 {
    color: #fff;
}

but others just remove the color specifically from the h* element.

Removing the color attribute fixed my issue. I didn't try adding in the override specific so that may or may not be the cleanest solution.

[thomaspark]

Hey @ekrichbaum, thanks for the bug report.

Bootstrap has similar problems if you apply .bg-dark to a component. One solution is to apply .text-white or another text color class to the header.

Another is to use .card for the containing element. That should account for the dark on dark problem.

[ekrichbaum]

I did have the card class applied. card text-white bg-primary to the card itself. Inside card-body there is a simple h2 tag where the color overrides (only on lux). The second stanza above is from other themes and does work as well as removing the color tag specifically from h2.

As comparables... Zephyr overrides that color as well but it is still visible with 212529 inside the h2.. Spacelab and Morph use a .card .h2 stanza as you suggested above to inherit color instead of the 2d2d2d set in the .h*. Cerulean overrides it with the stanza above by setting specifically #fff. And most never set the font color inside the h2 tag.

Personally, I like the idea of just removing the color of the h2 but that could cause other things I didn't see in my example. The .bg-* override is pretty specific or the .card override. Any of those fix the issue.

[ekrichbaum]

Do you want a second issue raised on Zephyr as a similar thing? It is at least readable in that case. Just not consistent.

[thomaspark]

Thanks for the follow-up. I'm pushing a fix for Lux and Zephyr.

Can you confirm it works for you. And if you spot the issue in any other themes, please let me know.

[ekrichbaum]

@thomaspark That fixed it. Thanks!