You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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.
The text was updated successfully, but these errors were encountered: