canonical / canonical/vanilla-framework

bug: dark theme selected dropdown colour turns white

Open
#4,911 2 comments 0 reactions 0 assignees View on GitHub
Bug 🐛 P3 Triaged Triaged: v4
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

**Describe the bug**

When an option is selected on the dark theme dropdown, and other options are being hovered, the selected option's colour updates to white, making the selected option unreadable.

**To Reproduce**

Steps to reproduce the behavior:

1. Use Windows/Ubuntu to recreate this bug. Mac will show the default OS dropdown stylings.
2. Go to [dark forms](https://vanillaframework.io/docs/examples/patterns/forms/forms-dark).
3. Select an Ubuntu version from the dropdown
4. Hover over other options.
5. See the error - selected option should turn white.

**Expected behavior**
The selected option should change to a different background colour, making the option readable.

**Screenshots**
![dark-bug](https://github.com/canonical/vanilla-framework/assets/62298176/32eaed4f-cfce-4b58-97c2-6e477986b1bf)

**Desktop (please complete the following information):**

- OS: Windows, Ubuntu Jammy
- Browser Microsoft Edge, Chromium
- Version: 119.0.2151.72

Contributor guide

Open the contributing guide

Research direction

Start at the dark forms example linked in the issue and inspect the dropdown styling used there. Reproduce it on Windows or Ubuntu in Chromium or Edge by selecting an option and hovering over others; done means the selected option remains readable with a distinct background colour.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, sass
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.