Color theme setting ignored by the menu of a <select> element in mobile browsers

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

Describe the issue

I have a <select> element. And I've set the color theme on the <html> element using data-bs-theme attribute.

In desktop browsers (Chrome, Edge, Safari, Firefox) the <select> is displayed correctly: ✅dark theme - dark <select>'s menu ✅light theme - light <select>'s menu

In mobile browsers (Chrome, Safari, Firefox) the menu of the <select> element seems to always be drawn according to the system's color theme, completely ignoring the data-bs-theme setting: ✅dark theme - dark <select>'s menu ❌light theme - dark <select>'s menu

I'm wondering if it can be fixed, or if it's the limitation of the browsers that cannot be overcome. If latter, then it would be useful to have the [documentation on color modes](https://getbootstrap.com/docs/5.3/customize/color-modes/) stating this limitation - save developers the trouble of figuring this out and preventing situations similar to the described one from happening in the first place🙌 ### Reduced test cases 1. Add ` ``` 2. Set the color theme to `dark` and check how ``'s menu is displayed in desktop and mobile browsers: ```html ``` ### What operating system(s) are you seeing the problem on? Android, iOS ### What browser(s) are you seeing the problem on? Chrome, Safari, Firefox ### What version of Bootstrap are you using? v5.3.3

MohamadSalman11 commented 7 hours ago

Hi @andreimilto , changing the color of a

twbs / bootstrap

Color theme setting ignored by the menu of a <select> element in mobile browsers #40795

Prerequisites

Describe the issue