ericgio
Add support for color modes
Describe the solution you'd like Bootstrap 5.3 added support for dark-mode and color-modes:
https://getbootstrap.com/docs/5.3/customize/color-modes/
It would be nice to have this also in this component.
How is this solution useful to others? Every user which allows color-modes in their app will benefit from this.
PS: it would also be very useful if the styles in RBT could use bootstrap sass color variables, which will also simplify theming and customization.
I'm pretty sure color modes should already mostly work with this component out of the box, right? you can simply add data-bs-theme="dark" to any parent element of the typeahead, or to individual typeahead elements like the menu or input. Where this might break down a little is the color of the hint and tokens, since those aren't standard Bootstrap components, but it shouldn't be too hard to customize those as needed. Is there some other behavior you're looking for?
Currently there are no references to color-mode in Typeahead.scss).
Also by default colors are RGB values and not css variables and thus it would not take any change which is performed on those by BS.
Since this plugin is intended to work with BS, colors should be taken from BS theme. This way any user should have to worry only to choose the right color scheme in BS without having to change also the colors for typeahead.
The component relies almost entirely on default BS colors/themes, so using dark mode should mostly work. As mentioned, the tokens used in the multi-select version have no BS analog, so those do require some custom colors and styles. If there are specific cases where you're finding the dark theme isn't working, can you please itemize them, ideally with screenshots, so I have a better idea of the problem? Thanks!
Here's the component using dark mode: