Skip to content

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

@minestarks

Description

@minestarks

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: microsoft/vscode#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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions