search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.35k stars 78.8k forks source link

Tracking: Color modes #37549

Open mdo opened 1 year ago

mdo commented 1 year ago

Calling out some outstanding todos and questions from #35857 as we'll merge that PR and tackle these things in smaller batches.

General todos

Q&A

Docs todos

Issues

After alpha release

Other tasks

Issues raised by contributors

septatrix commented 1 year ago

Another TODO I would like to add is that this should work without JS (which at least the preview in the PR does not). For the sake of accessibility and js-less users, it should default to respecting the system preferences. Thus, in its current form, the implementation also does not resolve #27514.

I would like to point out that this is the most upvoted comment in the PR (https://github.com/twbs/bootstrap/pull/35857#issuecomment-1282864225), second only to the "Any updates?" comment directly beneath it.

XhmikosR commented 1 year ago

Oh, didn't notice we have an issue. Related https://github.com/twbs/bootstrap/issues/37659

septatrix commented 1 year ago

Another TODO I would like to add is that this should work without JS (which at least the preview in the PR does not). For the sake of accessibility and js-less users, it should default to respecting the system preferences. Thus, in its current form, the implementation also does not resolve #27514.

Any update on this aspect? It is not hard to include both mechanisms (prefers-color-scheme and data-bs-theme) though it obviously increases bundle size a bit. I see that the mechanism can be changed when compiling though only one of them can be selected at once, which is rather limiting. Especially considering that the whole theming mechanism is intended to make it easier to adjust color etc to one's' liking without having to compile a custom BS variant.

chrisrodkey commented 1 year ago

Can we generate the new subtle bg, subtle border, and text emphasis colors from $theme-colors?

This would be really valuable, for me. This is where I got very confused/lost. I have seen this PR here, but that seems to be focused on adding a custom color, and not on how to adapt the primary color into primary-subtle. This is just where I had to give up on the testing, as I'm just not sure how to proceed. Hopefully the docs can resolve that, but even more hopefully there will be a way to set the subtle colors automatically via the $theme-colors. Otherwise it's going to be a big challenge.

carlosalvidrez commented 1 year ago

I suggest classes "bg-light" and "bg-dark" get automatically swapped with the light/dark color mode toggle. Thank you for this great feature.

duaneking commented 1 year ago

It should be noted that the examples actually do not include full source, as it's missing javascript files.

mellester commented 1 year ago

Another TODO I would like to add is that this should work without JS (which at least the preview in the PR does not). For the sake of accessibility and js-less users, it should default to respecting the system preferences. Thus, in its current form, the implementation also does not resolve #27514.

Any update on this aspect? It is not hard to include both mechanisms (prefers-color-scheme and data-bs-theme) though it obviously increases bundle size a bit. I see that the mechanism can be changed when compiling though only one of them can be selected at once, which is rather limiting. Especially considering that the whole theming mechanism is intended to make it easier to adjust color etc to one's' liking without having to compile a custom BS variant.

Would a option like $color-mode-type: data-media-query
that bundles both and fallbacks to media if and only if there is no data-bs-theme set, be the thing we need? so no-js will respect the user settings.