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://github.com/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.

[XhmikosR]

Oh, didn't notice we have an issue. Related #37659