Select Box Background Incorrect in Dark Mode on Microsoft Edge

[honghaianthony]

Description:

The select box background color is not displaying correctly in dark mode on Microsoft Edge. When a user clicks on a select box to view the list of options, the background appears white, making it difficult to read the options as the text color is also light. This issue affects the usability of the select boxes, as users cannot clearly see the list of items.

Steps to Reproduce:

1. Open Microsoft Edge.
2. Ensure that the browser is set to dark mode or the OS using dark mode.
3. Navigate to the page containing the select box component.
4. Click on the select box to view the dropdown list.

Expected Behavior:

The select box dropdown should have a dark background with light text, ensuring readability in dark mode.

Actual Behavior:

The select box dropdown has a white background with light text, making the list of items difficult to read.

Screenshots:

Environment:

• Browser: Microsoft Edge
• Browser Version: 125.0.2535.79
• OS: Windows 11 23H2
• Dark Mode: Enabled

[cf-sewe]

By the way, is it actually possible to toggle dark mode off (ideally even use the system setting)? If not, could this be achieved with a simple code change?

I think this issue is potentially a duplicate of: #293

[honghaianthony]

@cf-sewe Although I have toggled dark mode off in the OS settings, it still happens. The issue comes from 'chakra-ui-color-mode' in LocalStorage. I have added color mode functionality to Chakra UI in my PR. You can check it out here: Update the Color Mode for Charka UI

[cf-sewe]

I have added color mode functionality to Chakra UI in my PR

Thank you! Hopefully it would be merged into the main branch 😎