Skip to content
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

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

Open
2 tasks done
Banner-Keith opened this issue Aug 6, 2024 · 0 comments
Open
2 tasks done

Comments

@Banner-Keith
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants