dracula / visual-studio-code

🧛🏻‍♂️ Dark theme for Visual Studio Code
https://draculatheme.com/visual-studio-code
MIT License
785 stars 208 forks source link

[Bug] Multiple selections aren't rendered correctly #184

Open wenfangdu opened 3 years ago

wenfangdu commented 3 years ago

Default dark theme config:

{
  "workbench.colorCustomizations": {
    "editor.selectionBackground": "#f008"
  }
}

2021-07-04 10_07_42 Dracula config:

{
  "workbench.colorCustomizations": {
    "[Dracula]": {
      "editor.selectionBackground": "#bd93f980"
    }
  }
}

2021-07-04 10_11_25

wenfangdu commented 3 years ago

@dsifford Please see https://github.com/microsoft/vscode/issues/127948#issuecomment-902540074:

The problem is that the Dracula theme defines the following color:

"editor.selectionHighlightBackground": "#424450",

This color is not using transparency, so the selection highlights are being rendered on top of the selection. This is an oversight with the theme. Please open an issue against the theme at https://github.com/dracula/visual-studio-code.

A workaround would be to customize that color to add some transparency to it:

"workbench.colorCustomizations": {
        "[Dracula]": {
            "editor.selectionBackground": "#bd93f980",
            "editor.selectionHighlightBackground": "#59595e88"
        }
    },

image

dsifford commented 3 years ago

@wenfangdu Try setting editor.selectionHighlightBackground to #8BE9FD30 and let me know if you are satisfied with that.

wenfangdu commented 3 years ago

@dsifford Can you give a color suggestion for editor.selectionBackground as well, so I can check them in comparison.

wenfangdu commented 3 years ago

This is the editor.selectionBackground & editor.selectionHighlightBackground comparison in the default dark theme:

image

This is the editor.selectionBackground & editor.selectionHighlightBackground comparison in the Dracula theme:

image

In the default dark theme, editor.selectionBackground is more obvious, whereas in the Dracula theme, editor.selectionHighlightBackground is more obvious, I think we should adjust both editor.selectionBackground & editor.selectionHighlightBackground and make editor.selectionBackground more standout.

As a side note, I do find my custom values are pretty neat, you can take them into account if needed:

{
  "editor.selectionBackground": "#5d627e",
  "editor.selectionHighlightBackground": "#59595e88"
}

image

wenfangdu commented 3 months ago

@dsifford @luxonauta @zenorocha Please reopen this issue, since #253 has been reverted.