bootstrap Using .text-bg-* helper inside modals doesn't account for color contrast

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

Describe the issue

I am using a dark theme, overriding the heading color to be a pure white.

$headings-color-dark: white;

<body data-bs-theme="dark">

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-warning a yellow background. No color contrast magic is applied.

<div class="modal-header text-bg-warning"><!-- I want a nice color here -->
    <h5 class="modal-title">Title, using h5 like from the example</h5>

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

Dec 20 '24 16:12 theHacker

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 .text-bg-* inside a modal's title.

Dec 20 '24 18:12 theHacker

This is because .modal-title sets a color value vs inheriting it. No plans to change the bg/color helper, but I can see adjusting modal title down the line.

Dec 28 '24 06:12 mdo