microsoft / microsoft/vscode

charts.orange defaults to semi-transparent #EA5C0055 due to minimap.findMatchHighlight fallback

Open
#333,529 0 comments 0 reactions 1 assignee Claimed by @hawkticehurst View on GitHub
Dominant language
TypeScript
Stars
193k
Forks
42.4k
PR merge metrics
PR metrics pending

Description

### Bug Description

In `src/vs/platform/theme/common/colors/chartsColors.ts`, `charts.orange` is registered with a fallback to `minimapFindMatch`:

```typescript
export const chartsOrange = registerColor('charts.orange',
minimapFindMatch,
nls.localize('chartsOrange', "The orange color used in chart visualizations."));
```

In PR #283365 (resolving #237507, *"Reuse editor colors in the minimap"*), `minimapFindMatch` was updated to delegate to `editorFindMatchHighlight` (`editor.findMatchHighlightBackground`):

```typescript
export const minimapFindMatch = registerColor('minimap.findMatchHighlight',
editorFindMatchHighlight,
nls.localize('minimapFindMatchHighlight', 'Minimap marker color for find matches.'), true);
```

Because `editor.findMatchHighlightBackground` has a default value of `#EA5C0055` (~33% alpha to avoid obscuring underlying code in the editor buffer), any theme that does not explicitly define `charts.orange` (including *Dark Modern*, *Dark+*, *Light+*, and most third-party themes) receives a semi-transparent color for `charts.orange` (`--vscode-charts-orange: #ea5c0055`).

### Expected Behavior

Chart colors (`charts.red`, `charts.blue`, `charts.yellow`, `charts.green`, `charts.purple`, `charts.orange`) are intended for data visualizations, commit graphs, and chart lines where colors should default to 100% opaque.

`charts.orange` should default to an opaque orange color (e.g. `{ dark: '#cd861a', light: '#d18616', hcDark: '#ab5a00', hcLight: '#0f4a85' }` or a dedicated opaque token), matching how `charts.green` and `charts.purple` have explicit opaque default color objects.

### Steps to Reproduce

1. Open VS Code with a theme that does not define `charts.orange` explicitly (e.g. *Dark Modern* or *Dark+*).
2. Inspect the computed value of `--vscode-charts-orange` in a webview or test page.
3. Observe that `--vscode-charts-orange` resolves to `#ea5c0055` (~33% opacity) instead of an opaque orange.

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.