Tracking: Color modes

[mdo]

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

General todos

• JS review
• A11y review
  • Docs: callouts have horribly low contrast #37745
  • Docs navbar blue focus visible is almost invisible!
• Colors/Sass/CSS vars
  • Can we generate the new subtle bg, subtle border, and text emphasis colors from $theme-colors? This has been improved with CSS variables being generated from new maps. No way to generate new Sass variables from a map though.
  • Do we provide hex colors, rgba() colors, or both for the new variables? No, not in this version.
  • Document dark mode variables in css-variables.md
  • We don't always use anymore values from $theme-colors (alerts and list groups) so Customize > Sass > Add to map isn't completely true anymore?
    • Docs: new section to explain how to add a new color to the theme #37737 tackle a part of it
  • Split :root, [data-bs-* rules? (see Add dark mode support #35857 (comment)) I think for now, we leave as-is. Let's let this back while we get onto v6 where we can revamp.
  • Check feedback from Revisit docs dark mode colors #37659
• Forms
  • Improve form validation colors (see Add dark mode support #35857 (comment))
  • Consolidate approach to multiple background images and CSS vars for form control, check/radio/switch, form-select
  • Document changes to form validation map, mixin, bg image setting, and general colors
• Dropdowns
  • Deprecate .dropdown-menu-dark? If so, mention in Migration
• Navbars
  • Double check form field styling
  • Update togglers to use inline SVGs now instead of embedded ones? If so, mention in Migration
  • Check rendering and discrepancies with Bootstrap v5.2 (see Add dark mode support #35857 (comment))
• Accordion
  • move icons into HTML as SVGs as well? similar to navbars if so
• Utilities
  • Confirm if we like the inverted box shadow utilities Reverted back to default shadows.
  • Refactor new bg, border, and text utilities to use rgba() values? TBD on this, would change a lot (+ see Add dark mode support #35857 (comment) and Add dark mode support #35857 (comment)) Skipping in v5.
  • Document new theme color CSS variables
  • Document new dark mode Sass vars
• Pagination
  • calc() function in the comparison on L78? (see https:/twbs/bootstrap/pull/35857/files#r1020883939)
• Carousels
  • Third slide in dark mode, difficult to distinguish the normal color and the hovered one` This is the same colors as in default/light mode, so if we want to redo these, let's redo them all over. Saving for another time.
• Browser elements
  • Add color-scheme for dark mode #37710
• Examples
  • Things to do in the "Dark mode hero" in Heroes example?
• Automatic testing
  • Add something to automatically test $color-mode-type with media-query set (see Setting $color-mode-type to media-query (rather than data) causes a Sass compilation erro #37673) Already tackled by Add SCSS testing of the utilities API #36029
• Tooltips
  • Having $tooltip-color: var(--#{$prefix}body-bg) and $tooltip-bg: var(--#{$prefix}emphasis-color) since we use a background color to define the color of tooltips, and a text color to define the background of tooltips.

Q&A

• Why move some SVGs out of embedded CSS?
  • Makes CSS bundle smaller eventually (come v6)
  • Allows for use of inherited color as opposed to fixed colors, which requires repeating the entire SVG embed in CSS (adding to file size)

Docs todos

• Drop logo on homepage on mobile #37608
• Add color modes section to homepage
• Audit Migration guide once more
• Clarify color & bg helpers don't respond to color modes (yet?)
• Add more examples for color mode specific versions of components? Toasts, for example.
• Pass color mode to StackBlitz edit buttons?
• Access color modes in /examples?
  • Docs: display examples based on the docs current color mode #37562
  • Handle each example 1 by 1
• Lighten up the bootstrap-grid.scss file by not importing all of _root.scss?
  • Might be tackled by Reduce bootstrap-grid.css content #37844
• Linear gradient syntax in docs navbar? (see Add dark mode support #35857 (comment))
• New docs navbar SVGs need a11y support (done via Docs: Make theme switcher accessible #37780)
• Docs navbar dropdown width—move to CSS or keep inline? (see Add dark mode support #35857 (comment))
• Unrelated: Streamline JS and CSS banners
• Docs: Add black text/background examples #37538
• Check if we don't need to import variables-dark as well in color.md, api.md and customize.html
• Add in the documentation all $*-text, $*-bg-subtle and $*-border-subtle (see Add dark mode support #35857 (comment))
• Doc consistency between "Sass mixins|loops"/"Sass mixin|loop"/"Mixins|Loop" titles (see Add dark mode support #35857 (comment))
• docs: move color-mode script #37658
• Search
  • Docs: handle light/dark mode in Algolia search modal #37738
  • Visible focus (keyboard) must be improved in light/dark mode
• navbar/#color-schemes section in docs not updated properly to the 5.3 patch #37739

Issues

• The updated color-modes.md file to go with Dark Mode using ampersands for variables. #37674
• Setting $color-mode-type to media-query (rather than data) causes a Sass compilation erro #37673

After alpha release

• Improve display of :root and color mode CSS vars. Fixed by Fix CSS variables mentioned in our docs #37742
• Dark mode in the blog website
• Dark mode in the icons website
• Dark mode in the themes website?

Other tasks

• Create an issue to think to replace all occurrences of .text-muted by .text-body-secondary in v6

Issues raised by contributors

• $input-bg must be a string in latest Bootstrap version #37620
• Darkmode: btn-outline-dark is not visible in button group component #37753
• replacing navbar-dark with data-bs-theme breaks toggler icon color #37754
• Text on cards don't respect data-bs-theme #37765
  • ⚠️ Double-check the contextual color modes for all components. This might be linked to components having $component-*-color Sass vars having a null value
• Docs: light mode code snippets have very low contrast #37770
• Color mode switch flash issue (dark theme) #37774
• [Docs] Carousel caption color in dark mode #37795
• Nesting color mode: colors of headers are not overwritten #37799
• Docs: fix headings color in light/dark mode #37802
• Fix duplicate --bs-emphasis-color set value #37809
• Docs: enhance colors description table #37811
• [docs] missing warning for offcanvas dark classes #37853
• Default to using the prefers-color-scheme in @media for automatically rendering the client's preferred colour scheme #37973
• Most components don't support theme/dark mode theme color changes #37976
• Consider dynamic theming support #37983
• Dark theme: Base button text is not visible #38113

[septatrix]

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 (#35857 (comment)), second only to the "Any updates?" comment directly beneath it.

[septatrix]

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]

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]

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]

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

[mellester]

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.