qdk
qdk copied to clipboard
VS Code high contrast themes don't play nice with circuit diagrams or histograms
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:
High contrast dark (no change):
Default light:
Hight contrast light (no change in fill color, shadow change only):
When applied to the new clickable gates:
Default dark:
High contrast dark:
Default light:
High contrast light:
Histogram: