Fix: invisible <option> text in dark theme #454

2023-03-23T14:29:07Z

jiftechnify commented

2023-03-23 14:29:07 +00:00

(Migrated from github.com)

Description

In some environments, texts in <option>/<optgroup> elements are invisible if the dark theme is enabled. This problem occurs because the text color matches with the background color accidentally.

I confirmed that this problem occurred in:

Chrome on Windows 10
Edge on Windows 10
Chrome on Ubuntu 22.04
Firefox on Ubuntu 22.04

Fixed it by setting background-color of these elements to --bg-color.

I confirmed that this fix won't break appearance in other environments, such as Safari/Chrome on macOS/iOS, Chrome on Android.

Screenshots

Before Fix

After Fix

## Description In some environments, texts in `<option>`/`<optgroup>` elements are invisible if the dark theme is enabled. This problem occurs because the text color matches with the background color accidentally. I confirmed that this problem occurred in: - Chrome on Windows 10 - Edge on Windows 10 - Chrome on Ubuntu 22.04 - Firefox on Ubuntu 22.04 Fixed it by setting `background-color` of these elements to `--bg-color`. I confirmed that this fix won't break appearance in other environments, such as Safari/Chrome on macOS/iOS, Chrome on Android. ## Screenshots ### Before Fix ![snort_options_in_dark_theme](https://user-images.githubusercontent.com/12131273/227232007-f053415e-7c5b-4def-aa27-e01b71cdc89c.png) ### After Fix ![snort_options_in_dark_theme_fixed](https://user-images.githubusercontent.com/12131273/227233162-1e0c2b96-83aa-43ad-81bd-5f1f96a1dc79.png)

verbiricha (Migrated from github.com) approved these changes 2023-03-24 09:43:47 +00:00

Sign in to join this conversation.

No reviewers

verbiricha