29

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:

enter image description here

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

roob
  • 2,419
  • 3
  • 29
  • 45
  • 4
    Note to answerers: this is about the *background colour of the modified characters*, not the text colour, or the background colour of the modified line. – Timmmm Jun 04 '18 at 14:45

4 Answers4

27

Updating background color

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

Updated

Why it's not possible to natively update text color

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

It creates an overlay background as can be seen here.

Image class

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

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

double-beep
  • 5,031
  • 17
  • 33
  • 41
Tarun Lalwani
  • 142,312
  • 9
  • 204
  • 265
  • 2
    We want to change the colour of the highlighted background, not the text. You can see that the background on 1 and 0 is very slightly lighter than the rest of the line. It's so slight it's barely visible though. That is what we would like to fix. – Timmmm Jun 04 '18 at 14:43
  • It's actually clearer in your screenshot - we want to change the `char-delete` colour. – Timmmm Jun 04 '18 at 14:44
  • Okie let me check that – Tarun Lalwani Jun 04 '18 at 14:51
  • Unfortunately it still doesn't let you change them independently. The `removedTextBackground` directly sets the colour for the line, and then the characters seem to be automatically darkened from that in some uncontrollable way. See if you can set the line background to black and the characters to red for example. – Timmmm Jun 04 '18 at 16:37
  • 1
    @Timmmm, i have checked and its not configurable. You can use something like https://github.com/be5invis/vscode-custom-css to change the `line-delete` class css – Tarun Lalwani Jun 04 '18 at 16:49
  • Figured as much. Didn't know about that custom CSS extension though - looks useful, thanks! – Timmmm Jun 04 '18 at 17:13
  • Just want to say that "Update-1" was the solution for me. To summarize for anyone confused: You can't control the selected text color, but by making the red/green background semi-transparent, you allow the selection to be visible because it somehow uses transparency itself. So add 55 to the end of your colors, then rework the color selections you have to be brighter/darker/saturated to taste. – jerclarke Jun 18 '21 at 18:18
  • Here's my values for light mode: "diffEditor.removedTextBackground": "#ffa47d55", "diffEditor.insertedTextBackground": "#c4ff8155", – jerclarke Jun 18 '21 at 18:19
  • Here's my values for dark mode: "diffEditor.insertedTextBackground": "#38610955", "diffEditor.removedTextBackground": "#5e290e55", – jerclarke Jun 18 '21 at 18:19
  • Note that making these colors transparent has other follow-on effects! After fixing mine to make selected text visible, I was then also able to see which lines were modified v. added within the green sections, and exactly what had changed. VS Code should probably protect us somehow from using a non-transparent color for these values, since clearly the whole system assumes the diff colors will have transparency. – jerclarke Jun 18 '21 at 18:21
12

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"
}

diff editor colors

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

Mark
  • 143,421
  • 24
  • 428
  • 436
1

It is now possible to change the diff editor colors for the changed text and the line highlight separately. From the theme color reference:

  • diffEditor.insertedTextBackground: Background color for text that got inserted. The color must not be opaque so as not to hide underlying decorations.

  • diffEditor.removedTextBackground: Background color for text that got removed. The color must not be opaque so as not to hide underlying decorations.

  • diffEditor.insertedLineBackground: Background color for lines that got inserted. The color must not be opaque so as not to hide underlying decorations.

  • diffEditor.removedLineBackground: Background color for lines that got removed. The color must not be opaque so as not to hide underlying decorations.

E_net4
  • 27,810
  • 13
  • 101
  • 139
Aaron Potts
  • 11
  • 2
0

The color of the text is the original text color. That is not changing and there is no way to do that.

However the solution is hopefully coming. link

androbin
  • 1,622
  • 14
  • 31
  • 2
    We want to change the colour of the highlighted background, not the text. You can see that the background on `1` and `0` is *very slightly* lighter than the rest of the line. It's so slight it's barely visible though. That is what we would like to fix. – Timmmm Jun 04 '18 at 14:42
  • Oh I see. The diffed line has different bg colors. – androbin Jun 05 '18 at 13:27
  • stackoverflow best practice is to give useful info here on the site in case the link goes bad. – Urasquirrel Dec 12 '21 at 16:56