Add color-scheme for dark mode

[robinheidrich]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Bootstrap should make use of color-scheme to display browser elements (scrollbar, select, etc.) in dark mode as well.

Motivation and context

Here's a preview of what scrollbars currently look like in the Bootstrap documentation, and what they would look like if color scheme were used.

[mdo]

We just shipped color mode support in v5.3.0.

[coliff]

@mdo I think this is a valid issue and should be re-opened. Dark mode in Bootstrap 5.3 alpha doesn't currently add the colour-scheme CSS property so UI elements are not dark (see screenshots in original post)

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

[ffoodd]

Agreed, color-scheme is basically a global accent-color for browser UI, and makes thé overall color modes smoother.

[mdo]

Oh, my bad! I didn't see the second image, thanks for reopening fam :).

[mdo]

Do we just need to add color-scheme: dark to the :root for dark mode? I'm unclear of what's in scope for the changes coming from the property's inclusion. I see scrollbars change when I use it, but the <select> menu when shown doesn't change from light to dark. Am I missing something?

[coliff]

Do we just need to add color-scheme: dark to the :root for dark mode? I'm unclear of what's in scope for the changes coming from the property's inclusion. I see scrollbars change when I use it, but the <select> menu when shown doesn't change from light to dark. Am I missing something?

It affects a few other things too, such as browser-based autofill which typically changes the background of a form input to indicate to the user that it was autofilled. Here's a quick example from the docs which autofilled on email address of mine (Edge v108 on macOS). If the CSS had specified color-scheme: dark then the autofill background would have been dark to better match the theme.

here's autofill with color-scheme: dark set on the body

[julien-deramond]

Let's try a PR to add color-scheme for light and dark color modes (not 100% sure because haven't tried it yet but probably to the :root).

We must double-check everything in this PR:

• Behavior with default $color-mode-type and when set to media-query
• All elements that can be rendered differently: scrollbars, inputs (with autofill and/or options), textareas, selects, etc. (don't have an exhaustive list yet 😄)
• Browsers/OSs compatibility; some browsers seem to handle it better than others even without color-scheme

[mdo]

See #37734.