Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] <option> labels are not readable in dark mode

See original GitHub issue

Describe the bug <option> elements are inheriting the white color of the <select> element in dark mode and are not readable.

Suggested solution(s) A CSS reset for the <option> elements should do the trick (option { color: initial; })

Desktop Windows Chrome 80

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:16 (8 by maintainers)

Top GitHub Comments

1reaction

stefan-girlichcommented, Dec 9, 2020

@with-heart Sure!

https://codesandbox.io/s/eloquent-cray-u2bxb?file=/src/App.js

1reaction

stefan-girlichcommented, Dec 2, 2020

This phenomenon still exists as of @chakra-ui/react v1.0.1. Observations:

The white background (behind the white text) is only applied when a color is passed to <Select /> via the bg or bgColor prop.
Issue reproducible on Firefox 83.0 on MacOS 10.15.7
Not reproducible on Chrome 86.0.4240.198 on MacOS 10.15.7; unstyled native dropdown overlay is used
Issue only exists in light mode (if colorMode returned by useColorMode() equals "light")
colorMode from useColorMode() seems to be "light" by default, despite my OS and browsers being set to dark mode

Top Results From Across the Web

IR Rows per page selector label not readable in dark mode

I'm trying switching my apex app to dark mode but came about a problem. The IR report in dark mode do not have...

Change select box option background color - Stack Overflow

1. I took away the rgba option and seems to use black now which will do :) – ngplayground ; 7. You could...

LABELs don't work for OPTIONs (<option label> in selects ...

Bug 40545 - Fix the empty-label attribute case in the select popup. r=chutten ... Long Label </option> The label attribute is not shown...

Known issues with sensitivity labels in Office - Microsoft Support

One of the following: Configure the label to also have the encryption option In Outlook, enforce restrictions equivalent to the Do Not Forward ......

Supporting Dark Mode in Your Interface - Apple Developer

For example, when your view contains labels, choose the UIVibrancyEffectStyle.label style or one of the other label-related vibrancy options. Important. Do not ......