Skip to content

themes: fix match highlight contrast in focused quick pick rows (2026 themes)#314117

Merged
hawkticehurst merged 2 commits intomainfrom
agents/a11y-fix-highlight-color-update
May 4, 2026
Merged

themes: fix match highlight contrast in focused quick pick rows (2026 themes)#314117
hawkticehurst merged 2 commits intomainfrom
agents/a11y-fix-highlight-color-update

Conversation

@hawkticehurst
Copy link
Copy Markdown
Member

@hawkticehurst hawkticehurst commented May 4, 2026

Fixes #314035

#313740 increased the contrast of the focused quick pick row in the 2026 Dark and 2026 Light themes by switching the focus background to a saturated blue and the row foreground/icon foreground to white. This unfortunately caused a regression for search match highlights on the focused row: the matched substring still rendered using list.highlightForeground (blue), producing blue text on a blue background.

This PR adds list.focusHighlightForeground: #FFFFFF to both 2026 themes so match highlights on the focused row are rendered in white — matching the focused row's foreground/icon colors. The original list.highlightForeground (blue) is preserved for unfocused rows, retaining the prior accessibility fix.

Fix:

Screenshot 2026-05-04 at 10 52 42 AM Screenshot 2026-05-04 at 10 52 23 AM

Before:

Screenshot 2026-05-04 at 10 53 35 AM

Verified against

  1. Quick pick background (unfocused rows) — blue match highlight remains legible ✓
  2. Focused quick pick row — white match highlight is legible against the saturated blue focus background ✓

Co-authored-by: Copilot 223556219+Copilot@users.noreply.github.com

Add list.focusHighlightForeground: #FFFFFF to the 2026 Dark and 2026
Light themes so search match highlights remain legible against the
saturated blue focused row background introduced in #313740.

The original list.highlightForeground (blue) is preserved for unfocused
rows, retaining the prior accessibility fix.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings May 4, 2026 14:54
@hawkticehurst hawkticehurst added the ~release-cherry-pick Trigger: cherry-pick this PR to the latest release branch label May 4, 2026
@vs-code-engineering
Copy link
Copy Markdown
Contributor

This PR will be automatically cherry-picked to release/1.119 when merged.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR aims to restore legible search match highlighting on the focused quick pick row in the 2026 Light/Dark themes after the focused-row background was changed to a saturated blue, by overriding the focused match highlight color to white.

Changes:

  • Add list.focusHighlightForeground: #FFFFFF to the 2026 Light theme.
  • Add list.focusHighlightForeground: #FFFFFF to the 2026 Dark theme.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File Description
extensions/theme-defaults/themes/2026-light.json Overrides focused list match highlight color to white to address blue-on-blue highlights in focused quick pick rows.
extensions/theme-defaults/themes/2026-dark.json Same override for the 2026 Dark theme.

Comment thread extensions/theme-defaults/themes/2026-light.json Outdated
Comment thread extensions/theme-defaults/themes/2026-dark.json Outdated
Address review: instead of overriding the global `list.focusHighlightForeground`
(which would impact all lists/trees in the workbench, including those with
light tinted focus backgrounds in 2026 Light), introduce a new
`quickInputList.focusHighlightForeground` color token scoped to the
quick pick. Update quickInput.css to use the new token and set it to
white in the 2026 Dark and 2026 Light themes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@hawkticehurst
Copy link
Copy Markdown
Member Author

Addressed in 35eb2ba. Replaced the global list.focusHighlightForeground override with a new quick-pick-specific token quickInputList.focusHighlightForeground (defaults to list.focusHighlightForeground), and updated quickInput.css to use it. The 2026 Dark/Light themes now set only this scoped token to white, leaving general list/tree match highlights untouched.

@vs-code-engineering
Copy link
Copy Markdown
Contributor

📬 CODENOTIFY

The following users are being notified based on files changed in this PR:

@TylerLeonhardt

Matched files:

  • src/vs/platform/quickinput/browser/media/quickInput.css

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 4, 2026

Screenshot Changes

Base: ebfbb71d Current: 2e5e2958

Changed (1)

agentSessionsViewer/NeedsInput/Light
Before After
before after

@hawkticehurst hawkticehurst merged commit 8b69774 into main May 4, 2026
26 checks passed
@hawkticehurst hawkticehurst deleted the agents/a11y-fix-highlight-color-update branch May 4, 2026 17:20
@vs-code-engineering vs-code-engineering Bot added this to the 1.119.0 milestone May 4, 2026
@vs-code-engineering vs-code-engineering Bot added release-cherry-pick Automated cherry-pick between release and main branches and removed ~release-cherry-pick Trigger: cherry-pick this PR to the latest release branch labels May 4, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release-cherry-pick Automated cherry-pick between release and main branches

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2026 Theme - Matched text in command prompt and recent file picker is not visible

3 participants