How to change diff color Visual Studio Code

Question

In User setting in VSCode I can add the following to User settings to change the color of lines that are inserted / deleted:

"workbench.colorCustomizations": {
    "diffEditor.removedTextBackground": "#000000",
    "diffEditor.insertedTextBackground": "#ffffff"
}

However I want to change the color of the highlighted part of inserted/changed lines that shows what was actually changed. With my current theme, there is not enough contrast:

How can I change this highlighted portion of the diff text? Is there a setting for this?

Answer 1

The way the diff editor current works is that it never alters the original text color

It creates a overlay background as can be seen here

https://github.com/Microsoft/vscode/blob/292732cd19cd4c6b0e11e779d14be480ff186ca8/src/vs/editor/browser/widget/diffReview.ts#L654

So basically text renders as it is and the overlay gives the feel that you have a different background.

That is why you can't control the text color or set a foreground color. This is the limitation of current approach that VSCode/MonacoEditor takes

Update-1

Since you need to update background only. The only issue in your config earlier was there was no alpha channel specified. You can update it like below

"workbench.colorCustomizations": {
    "diffEditor.removedTextBackground": "#FF000055",
    "diffEditor.insertedTextBackground": "#ffff0055"
}

Where 55 is the alpha channel value. The updated values will have below effect

Update 2 - 5th Jun 2018

You can't control two line colour and char colour separately through normal way. But you can use a custom css plugin for vscode

https://github.com/be5invis/vscode-custom-css

Answer 2

Just added are some more colors for diff editors, see

"workbench.colorCustomizations": {
    "diffEditor.insertedTextBackground": "#00ff007c",    // previous
    "diffEditor.removedTextBackground": "#ff00007c",     // previous

    // Background color for lines that got inserted/removed. 
    // The color must not be opaque so as not to hide underlying decorations.
    "diffEditor.insertedLineBackground": "#22336866",   // rest are new
    "diffEditor.removedLineBackground": "#72336a66",

    "diffEditorGutter.insertedLineBackground": "#223368ff",
    "diffEditorGutter.removedLineBackground": "#72336aff",

    "diffEditorOverview.insertedForeground": "#02b40b",
    "diffEditorOverview.removedForeground": "#a10000"
}

Should be in the Insiders Build v1.65 soon for testing. But gives a lot more flexibility.

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