qdk icon indicating copy to clipboard operation
qdk copied to clipboard

VS Code high contrast themes don't play nice with circuit diagrams or histograms

Open minestarks opened this issue 1 month ago • 1 comments

The button.background, button.secondaryBackground, button.hoverBackground and button.secondaryHoverBackground variables are inconsistently defined in the VS Code high contrast themes.

This causes two issues:

  • We fall back to our default colors in some places, which don't work well with other colors in the theme (see the dark grey clickable gate in "high contrast light hover effect" below)
  • When the hover color is defined to be the same as the regular button color, the hover effect is invisible (see the high contrast dark examples). This does mirror the native button behavior in VS Code, but we may still want our hover effects to stand out more, e.g. to make it obvious that the circuit gates are clickable.

Note the high contrast colors were tweaked in VS Code recently which made the issue more obvious: https://github.com/microsoft/vscode/pull/270768

EXAMPLES

The Run button in the circuit editor

Default dark:

Image

High contrast dark (no change):

Image

Default light:

Image

Hight contrast light (no change in fill color, shadow change only):

Image

When applied to the new clickable gates:

Default dark:

Image

High contrast dark:

Image

Default light:

Image

High contrast light:

Image

minestarks avatar Nov 17 '25 23:11 minestarks

Histogram:

Image Image

minestarks avatar Nov 19 '25 20:11 minestarks