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

Question

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

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

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?

**See Also**: [How to change diff color Visual Studio Code](https://stackoverflow.com/a/50680317/1366033) — KyleMit, Feb 27 '21 at 13:26

score 2 · Answer 1 · answered Aug 30 '19 at 15:23

2

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.

answered Aug 30 '19 at 15:23

rioV8

24,506
3
32
49

1

Thanks. It seems the contrast between the line and the decoration is fixed, so setting a bright decoration also results in a bright background. Regardless of high or low alpha and/or color value. Is there a separate variable for setting the contrast ratio? – sveinse Aug 30 '19 at 17:22

score 0 · Answer 2 · answered Feb 18 '22 at 16:06

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

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

2 Answers2