CODEWITHSUNDEEP
visual-studio-code
sveinse
sveinse

Reputation: 11

How can I customize the text colors for the diff editor changes

Running VS Code 1.37.1 with colorTheme Dark Pro Vidid, I'm trying to customize the theme in my own config in order to increase the visibility in diff editor. I'd like to decrease the background color contrast, and significantly enhance the visibility for the outlined changed text areas.

Diff editor in default theme colors diff editor default

Note the highlight on "argument_removed" on L7 and "argument_added" on L12.

When I try to use 

"workbench.colorCustomizations": {
    "diffEditor.removedTextBackground": "#300000",
    "diffEditor.insertedTextBackground": "#002800"
}

I get the following result:

Diff editor with color customization diff editor custom

As can be seen, setting these colors, removes the highlight color altogether.

How can I change the highlight colors? What are the theme setting for these?

Upvotes: 1

Views: 778

Answers (2)

Mark
Mark

Reputation: 182974

Two new colorCustomizations for added and removed lines were just added. Will be in Insiders Build v1.65 soon.

{
  "workbench.colorCustomizations": {
     "diffEditor.insertedLineBackground": "#22336866",
     "diffEditor.removedLineBackground": "#72336a66"
  }
}

See https://github.com/microsoft/vscode/issues/103207#issuecomment-1044647883

Upvotes: 0

rioV8
rioV8

Reputation: 28858

You have to set a transparency to the colors and you have to choose a bit brighter color to see the decoration. I have used some random colors for demo.

{
  "workbench.colorCustomizations": {
    "diffEditor.removedTextBackground": "#a0a00050",
    "diffEditor.insertedTextBackground": "#00a0a050"
  }
}

You might experiment with the correct transparency setting for your colors and theme.

Upvotes: 2

Related Questions