When few QuickPickItems are shown there is not enough contrast in dark mode

[timheuer]

Type: Bug

When a QuickPick menu is shown with a small amount of items (like a true/false or only two options), in dark theme, the second item feels more muted as the background (editor or other thing) isn't enough contrast against the item behind it. Compared to light mode where there is more edges in contrast.

This was reported by some user studies on our extension, missing seeing the second option.

VS Code version: Code - Insiders 1.96.0-insider (709e28fc21bfb5ed982c04e7e5bd53279cf8869e, 2024-11-27T08:45:28.012Z) OS version: Windows_NT x64 10.0.26100 Modes:

System Info

|Item|Value| |---|---| |CPUs|11th Gen Intel(R) Core(TM) i7-11370H @ 3.30GHz (8 x 3302)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
skia_graphite: disabled_off
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled
webnn: disabled_off| |Load (avg)|undefined| |Memory (System)|31.84GB (6.15GB free)| |Process Argv|--crash-reporter-id 5f5d2ab1-465c-4ddc-809d-58d91db5dfb0| |Screen Reader|no| |VM|0%|

Extensions (96)

Extension|Author (truncated)|Version ---|---|--- better-comments|aar|3.0.2 tsl-problem-matcher|amo|0.6.2 open-in-github-button|ant|0.1.1 vscode-httpyac|anw|6.16.4 azurite|Azu|3.33.0 npm-intellisense|chr|1.4.5 path-intellisense|chr|2.9.0 esbuild-problem-matchers|con|0.0.3 vscode-markdownlint|Dav|0.57.0 vscode-eslint|dba|3.0.10 npm-browser|den|1.1.4 gitlens|eam|2024.11.2704 vsc-material-theme-icons|equ|3.8.10 azure-storage-explorer|for|0.1.2 visual-nuget|ful|0.3.4 html-preview-vscode|geo|0.2.5 vscode-user-secret-management|gia|1.0.0 codespaces|Git|1.17.3 copilot|Git|1.246.1230 copilot-chat|Git|0.23.2024112701 remotehub|Git|0.64.0 vscode-github-actions|git|0.27.0 vscode-pull-request-github|Git|0.100.3 rest-client|hum|0.25.1 svg|joc|1.5.4 rainbow-csv|mec|3.13.0 render-crlf|med|1.8.5 fluent-icons|mig|0.0.19 dotenv|mik|1.0.1 lipsum-generator|MrA|1.2.3 language-gettext|mro|0.5.0 azure-pipelines|ms-|1.247.2 azure-dev|ms-|0.8.4 vscode-apimanagement|ms-|1.0.8 vscode-azure-github-copilot|ms-|0.3.42 vscode-azureappservice|ms-|0.25.4 vscode-azurecontainerapps|ms-|0.7.1 vscode-azurefunctions|ms-|1.16.1 vscode-azureresourcegroups|ms-|0.9.9 vscode-azurestaticwebapps|ms-|0.12.2 vscode-azurestorage|ms-|0.16.1 vscode-azurevirtualmachines|ms-|0.6.6 vscode-bicep|ms-|0.31.92 vscode-cosmosdb|ms-|0.24.0 vscode-docker|ms-|1.29.3 csdevkit|ms-|1.14.12 csharp|ms-|2.58.20 dotnet-interactive-vscode|ms-|1.0.5575041 vscode-dotnet-pack|ms-|1.0.13 vscode-dotnet-runtime|ms-|2.2.3 vscode-dotnet-sdk|ms-|0.8.0 vscode-aks-tools|ms-|1.5.2 vscode-kubernetes-tools|ms-|1.3.18 playwright|ms-|1.1.12 debugpy|ms-|2024.12.0 python|ms-|2024.20.0 jupyter|ms-|2024.10.0 remote-containers|ms-|0.391.0 remote-ssh|ms-|0.116.2024112515 remote-ssh-edit|ms-|0.87.0 remote-wsl|ms-|0.88.5 vscode-remote-extensionpack|ms-|0.26.0 azure-account|ms-|0.12.0 azure-repos|ms-|0.40.0 azurecli|ms-|0.6.0 cpptools|ms-|1.23.1 live-server|ms-|0.4.15 makefile-tools|ms-|0.12.10 powershell|ms-|2024.4.0 remote-explorer|ms-|0.5.2024111900 remote-repositories|ms-|0.42.0 remote-server|ms-|1.6.2024112109 vscode-speech|ms-|0.12.1 windows-ai-studio|ms-|0.6.1 azurerm-vscode-tools|msa|0.15.13 uuid-generator|net|0.0.5 vsix-viewer|onl|1.0.5 vscode-jest|Ort|6.4.0 vscode-versionlens|pfl|1.14.5 material-icon-theme|PKi|5.14.1 postman-for-vscode|Pos|1.5.0 quicktype|qui|23.0.170 sqlite-viewer|qwt|0.9.5 vscode-thunder-client|ran|2.32.2 vscode-yaml|red|1.15.0 vscode-marketplace-preview|rob|1.5.1 svg-preview|Sim|2.8.3 aspire-gen|Tim|0.3.0 dotnet-containerizer|Tim|0.1.2 mympclient|tim|0.1.6 resx-editor|tim|0.2.21 es6-string-html|Tob|2.16.0 typespec-vscode|typ|0.62.0 application-insights|Vis|0.4.2 vscode-icons|vsc|12.9.0 volar|Vue|2.1.10 (1 theme extensions excluded)

A/B Experiments

``` vsliv368cf:30146710 vspor879:30202332 vspor708:30202333 vspor363:30204092 vscod805cf:30301675 vsaa593:30376534 py29gd2263:31024238 vscaac:30438845 c4g48928:30535728 2i9eh265:30646982 962ge761:30841072 pythonnoceb:30776497 asynctok:30898717 dsvsc014:30777825 dsvsc015:30821418 pythonmypyd1:30859725 h48ei257:31000450 pythontbext0:30879054 cppperfnew:30980852 pythonait:30973460 da93g388:31013173 dvdeprecation:31040973 dwnewjupyter:31046869 nativerepl1:31134653 pythonrstrctxt:31093868 nativeloc1:31118317 cf971741:31144450 e80f6927:31120813 iacca1:31150324 notype1:31143044 dwcopilot:31158714 h409b430:31177054 390bf810:31183120 5b1c1929:31184661 ```

[isidorn]

The issue might be that the quick pick shadow is more visible on the light theme, compared to the dark theme.

[TylerLeonhardt]

What theme are you using?

[TylerLeonhardt]

It looks like Dark Modern... which does have a darker Quick Pick and well darker everything. Maybe we go a touch lighter on the quick pick.

@isidorn this is probably a good one for the future @daviddossett.

[timheuer]

@TylerLeonhardt my light theme is a custom one, but the dark one is 'Default Dark Modern'