Using .text-bg-* helper inside modals doesn't account for color contrast #41113
Comments
|
My workaround, for just the use-case: .text-bg-warning .modal-title {
color: black;
}A more sophisticated solution: @each $color, $value in $theme-colors {
.text-bg-#{$color} .modal-title {
color: color-contrast($value) if($enable-important-utilities, !important, null);
}
}Both only targeting use of |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Describe the issue
I am using a dark theme, overriding the heading color to be a pure white.
According to documentation (https://getbootstrap.com/docs/5.3/helpers/color-background/#with-components), the
.text-bg-helpers can be used in components, too.I used them on a modal to colorize the header section of the dialog. Works nice.
However, on a warning dialog (yellow background), the heading text is not readable anymore because of "white on yellow".
The modal's documentation (https://getbootstrap.com/docs/5.3/components/modal/#examples) suggests to using a
<h5>tag.Putting those two facts together, the
<h5>gets the overridden foreground color white, and with the.text-bg-warninga yellow background. No color contrast magic is applied.Knowing that I can of course fix the issue for me. But I am wondering, if that's an issue Bootstrap can improve on.
Not sure, if you can anticipate all usages where
.text-bg-*can be used together with other components.Or alternatively, add a sentence to the documentation, that the helper does not work on all components in all cases.
(Full code in linked CodePen)
Reduced test cases
https://codepen.io/theHacker42/pen/qEWmqLK?editors=2100
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.3
The text was updated successfully, but these errors were encountered: