bootstrap
bootstrap copied to clipboard
For v6 Consider replacing -dark and -light class utilities with contrast utilities.
Prerequisites
- [X] I have searched for duplicate or closed feature requests
- [X] I have read the contributing guidelines
Proposal
The -light and -dark utilities are a bit awkward now that dark mode is supported in bootstrap.
If I have a site that uses -light that was generally designed to provide a small amount of contrast to differentiate between elements such as a header or card body. If you used -dark you were going for high contrast. Now if you simply add data-bs-theme="dark"
to the root of my main html layout page, I now have a site in dark mode, with some glaring bright white elements that were previously a minor contrast. And things with -dark that were previously high contrast and stood out are now blending in.
In my sites I basically invert -dark and -light when in dark mode and that provides a much closer experience to what someone would expect when switching to dark mode.
I would suggest that in v6 -light and -dark be deprecated. They don't have to be removed yet, but could be. And then some kind of replacement like -lowcontrast and -highcontrast be added. In light mode -lowcontrast could be a very light gray like -light is today, and -highcontrast could be a dark gray like -dark is. But when you switch do dark mode -lowcontrast would be a dark gray, and -highcontrast would be a dark gray.
This would seem much clearer now that most websites are expected to handle theming gracefully. It should dovetail nicely with the other changes tracked in #37549
Motivation and context
This would solve developers encountering very bright light gray elements on dark mode sites that blended in nicely in light mode.