Project

General

Profile

Actions
Copy link

Bug #11730

closed

"Dark" theme does not sufficiently distinguish between selected and deselected elements in option lists

Added by Marcos M over 3 years ago. Updated about 2 years ago.

Status:
Resolved
Priority:
Normal
Assignee:
Marcos M
Category:
Web Interface
Target version:
2.7.0
Start date:
Due date:
% Done:

100%

Estimated time:
Plus Target Version:
23.01
Release Notes:
Default
Affected Version:
Affected Architecture:

Description

The options within select elements are hard to see when hovering over them. See attached option-background-current.png. This applies to Firefox and Chromium browsers when the browser/OS theme is set to dark.

Files

Download all files
option-background-current.PNG (22.5 KB) option-background-current.PNG Marcos M, 03/25/2021 08:40 PM
selection_hover_fix.png (4.88 KB) selection_hover_fix.png Marcos M, 12/07/2022 08:53 PM
selection_hover.png (4.87 KB) selection_hover.png Marcos M, 12/07/2022 08:53 PM
Actions
Copy link
 #1

Updated by Marcos M about 2 years ago

  • File selection_hover_fix.png selection_hover_fix.png added
  • File selection_hover.png selection_hover.png added
  • Subject changed from Improve visibility of option selections in dark themes to Highlighted options within drop-down lists are difficult to differentiate in the dark theme.
  • Description updated (diff)
  • Status changed from New to Pull Request Review
  • Assignee set to Marcos M
  • Target version set to 2.7.0
  • Plus Target Version set to 23.01
  • Affected Version deleted (2.5.0)

There exist a number of workarounds with mixed complexity and compatibility between different browsers and even versions of the same browser. The simplest solution here is to adjust the background color of the select element when it's in focus to something with higher contrast. This avoids conflicts with other style choices such as when an element is disabled.

https://gitlab.netgate.com/pfSense/pfSense/-/merge_requests/971

Actions
Copy link
 #2

Updated by Marcos M about 2 years ago

  • File deleted (option-background-css.PNG)
Actions
Copy link
 #3

Updated by Marcos M about 2 years ago

  • File deleted (option-background-white.PNG)
Actions
Copy link
 #4

Updated by Jim Pingle about 2 years ago

  • Subject changed from Highlighted options within drop-down lists are difficult to differentiate in the dark theme. to "Dark" theme does not sufficiently distinguish between selected and deselected elements in option lists
  • Start date deleted (03/25/2021)
Actions
Copy link
 #5

Updated by Marcos M about 2 years ago

  • Status changed from Pull Request Review to Feedback
  • % Done changed from 0 to 100
Actions
Copy link
 #6

Updated by Danilo Zrenjanin about 2 years ago

  • Status changed from Feedback to Resolved

Tested against:

23.01-DEVELOPMENT (amd64)
built on Sat Dec 10 03:22:16 UTC 2022
FreeBSD 14.0-CURRENT

It looks fine now.

I am marking this ticket resolved.

Actions
Copy link

Also available in: Atom PDF