bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

For v6 Consider replacing -dark and -light class utilities with contrast utilities.

Open Banner-Keith opened this issue 6 months ago • 0 comments

Prerequisites

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.

Banner-Keith avatar Aug 06 '24 16:08 Banner-Keith