<code> elements ignore auto-contrasting colors

[aph3rson]

Prerequisites

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

Describe the issue

To preface: I'm not sure if this is a bug, feature request, or an "I'm holding it wrong" moment.

I have some HTML that makes heavy use of <code> tags, along with the auto-contrasting CSS classes (text-bg-dark and similar). Using darker-colored backgrounds with these code blocks creates contrast issues, even though the text color is supposed to auto-contrast with the background.

I've included an example of how this is rendered. I would've expected this to automatically-correct the color to a more-usable contrasting value, or for the docs to tell me recommended ways to do this for things like inline <code> elements.

Reduced test cases

  <div class="container py-4">
    <div class="row align-items-md-stretch">
      <div class="col-md-6">
        <div class="h-100 p-5 text-bg-dark rounded-3">
          <h2>Heading</h2>
          <p class="lead">
            Lead sentence.
          </p>
          <div class="my-3" id="explanation">
            <p>
              Alice's application stores the button press state in a cookie, <code>pressedAt</code>.
              When the page loads (or whenever you press the button), the value of this cookie is inserted into the DOM
              using the <code>innerHtml</code> attribute. <br>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

What operating system(s) are you seeing the problem on?

Android, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.3.3

[julien-deramond]

Hello @aph3rson
Thanks for creating an issue here.

To preface: I'm not sure if this is a bug, feature request, or an "I'm holding it wrong" moment.

The topic of colors can get tricky, especially when it involves light, dark, and utilities.
My first impression is that it's not a bug, but I can understand why it could look like it.

If we go back to the background utilities, when you use a .bg-primary (or any other colors), the <code> color won't change automatically. It will only change when you change the color mode to switch to light or dark mode.

Then, if you use .text-bg-primary for instance, it will be the same because it simply does the following:

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class.

On one hand, the .bg-primary part won't change the text color.
On the other hand, the text utility will only apply a defined contrasted text color, but only for the "pure" text, otherwise your <code> would have the same color as the text.

If we go back to your example, .text-bg-dark will do the same, and so not change the <code> color.

If you want it to change and adapt, I think you are closer to the contextual dark mode concept. In this case, you could do something like that instead: <div data-bs-theme="dark" class="h-100 p-5 rounded-3 bg-dark text-white">:

• Force the dark mode contextually so it will switch the code color to the light pink/red by default
• Force the bg color to be dark
• Force the text color (other than the code) to white

You can see the rendering here and the difference between your code and what I'm suggesting here: https://codepen.io/julien-deramond/pen/QWRZJew

---

@twbs/css-review If you agree with this analysis saying that it's not a bug, but a "feature", I'll close the issue.

[aph3rson]

@julien-deramond - thanks for the reply.

Then, if you use .text-bg-primary for instance, it will be the same

FWIW, I did notice this as well, but only reported .text-bg-dark. In my case, I'm reusing most of the jumbotron example code, which uses this class, and makes for a good "a new user might do this" experience.

If we go back to the background utilities, when you use a .bg-primary (or any other colors), the <code> color won't change automatically. It will only change when you change the color mode to switch to light or dark mode.

Color and background helpers combine the power of our .text-* utilities and .bg-* utilities in one class.

On one hand, the text utility will only change the pure text color, otherwise your <code> would have the same color as the text.
On the other hand, the .bg-primary part won't change the text color, neither.

I think we disagree here, this feels like a bug. The point of these classes, at least from my interpretation in the docs/the quote you gave, is that these allow users to avoid setting .text-* and .bg-* classes manually. In your example case, we've now had to define these classes manually, as well as set data-bs-theme.

I think <code> (and <a>, with some testing) are the only (?) "textual" elements that automatically gain a different color, potentially with a different contrast than the underlying text.

Is there anywhere in the docs that says that we should be setting data-bs-theme along with these new auto-contrast classes? At the very least, if it's not a bug, it feels like this behavior should be better documented, and the current examples (i.e. this one) updated as well.

[julien-deramond]

In your example case, we've now had to define these classes manually, as well as set data-bs-theme.

I apologize for the quick example, but you can still use .text-bg-dark as before: here's an example on CodePen. The only effect of data-bs-theme="dark" is to enable <code> elements to have a more contrasted color that we defined for dark mode.

Is there anywhere in the docs that says that we should be setting data-bs-theme along with these new auto-contrast classes?

Note that if you did the same thing in Bootstrap v5.2, without the color modes, you would encounter the same issue.

Using data-bs-theme is an option in your precise configuration that makes this task easier. Previously, you would have had to override the <code> color manually to ensure sufficient contrast (e.g., <code class="text-warning"> or <code class="custom-code-color">).

This is possible in your configuration because you're using .text-bg-dark. If you were using .text-bg-danger, you would need to define your own code color anyway, as neither the light nor dark code colors would provide enough contrast. Consider my suggestion as a hack for your use case.

At the very least, if it's not a bug, it feels like this behavior should be better documented

Indeed, there is room for improvement in the documentation to better explain the relationship between text/bg/text-bg utilities and the color modes. I'm not sure how and where exactly, but let's think about it.

and the current examples (i.e. this one) updated as well.

Regarding the current examples, such as this one, IMHO it's correct as it stands. Setting data-bs-theme="dark" is optional, depending on what you aim to achieve inside this container.