microsoft / microsoft/vscode

Modern UI-Replace alpha with solid hex on hover states on 2026 default themes

Open
#332,640 0 comments 0 reactions 1 assignee Claimed by @mrleemurray View on GitHub
modernization
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

## Description

Hover states currently use colors with alpha transparency. Their final appearance therefore changes depending on the background beneath them.

Update hover states across the product to use solid colors, aligning the implementation with Figma and creating a consistent appearance across surfaces.

## Color specification

| State | Current Light | New Light | Current Dark | New Dark |
|---|---|---|---|---|
| Item hover | `#00000014` | `#F1F1F3` | `#FFFFFF14` | `#1E1F20` |
| Nested action hover | `#0000001F` | `#E3E3E5` | `#5A5D5E50` | `#323233` |

## Acceptance criteria

- Apply the solid hover colors wherever the corresponding hover states are used.
- Hover colors use opaque six-digit hex values without alpha.
- The resulting color remains consistent across different backgrounds and surfaces.
- Nested action hover remains visually distinct from the parent hover state.
- Validate representative product surfaces in both 2026 Light and 2026 Dark.
- High-contrast theme behavior remains unchanged.

Figma [link](https://www.figma.com/design/nE50XAgPReJgrEDmC0aLPI/VS-Code-Design-Foundation-2026?node-id=87-89&t=cV3egSRhDSuEp50o-1)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.