Project

General

Profile

Actions

Bug #11730

closed

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

Added by Marcos M almost 2 years ago. Updated about 2 months ago.

Status:
Resolved
Priority:
Normal
Assignee:
Category:
Web Interface
Target version:
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

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 #1

Updated by Marcos M 2 months 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 #2

Updated by Marcos M 2 months ago

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

Updated by Marcos M 2 months ago

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

Updated by Jim Pingle 2 months 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 #5

Updated by Marcos M about 2 months ago

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

Updated by Danilo Zrenjanin about 2 months 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

Also available in: Atom PDF