如何更改差异颜色 Visual Studio 代码

Question

在 VSCode 的用户设置中，我可以将以下内容添加到用户设置中以更改插入/删除的行的颜色：

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

但是我想更改 inserted/changed 行中突出显示的部分的颜色，以显示实际更改的内容。以我现在的主题，反差不够：

如何更改差异文本的突出显示部分？这个有设置吗？

Answer 1

文字颜色为原文颜色。这不会改变，也没有办法做到这一点。

但是希望解决方案即将到来。 link

Answer 2

差异编辑器当前的工作方式是它从不改变原始文本颜色

它创建了一个覆盖背景，如下所示

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

基本上，文本按原样呈现，叠加层给人一种背景不同的感觉。

这就是为什么您无法控制文本颜色或设置前景色的原因。这是 VSCode/MonacoEditor 采用

当前方法的局限性

Update-1

因为您只需要更新背景。您之前配置中的唯一问题是没有指定 alpha 通道。您可以像下面这样更新它

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

其中 55 是 Alpha 通道值。更新后的值将产生以下影响

更新 2 - 2018 年 6 月 5 日

您无法通过正常方式分别控制两条线的颜色和字符的颜色。但是您可以为 vscode

使用自定义 css 插件

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

Answer 3

刚刚为 diff 编辑器添加了更多颜色，请参阅

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

应该很快就会在 Insiders Build v1.65 中进行测试。但提供了更多的灵活性。

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

如何更改差异颜色 Visual Studio 代码

How to change diff color Visual Studio Code

themes

visual-studio-code

vscode-settings