-
-
Notifications
You must be signed in to change notification settings - Fork 78.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
<code> elements ignore auto-contrasting colors #40582
Comments
Hello @aph3rson
The topic of colors can get tricky, especially when it involves light, dark, and utilities. If we go back to the background utilities, when you use a Then, if you use
On one hand, the If we go back to your example, 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:
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. |
@julien-deramond - thanks for the reply.
FWIW, I did notice this as well, but only reported
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 I think Is there anywhere in the docs that says that we should be setting |
I apologize for the quick example, but you can still use
Note that if you did the same thing in Bootstrap v5.2, without the color modes, you would encounter the same issue. Using This is possible in your configuration because you're using
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.
Regarding the current examples, such as this one, IMHO it's correct as it stands. Setting |
Prerequisites
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
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
The text was updated successfully, but these errors were encountered: