visual-studio-code

How can I change the colours of SCM diff decorations in VS Code?


VS Code has diff decorations in its Explorer View, tab handles, Source Control View, editor gutter, editor minimap, and editor scrollbars ("overview rulers"). How can I change the colours of the source control diff decorations in each of those places?


Solution

  • You can use the following colour customization points (this goes in settings.json):

    "workbench.colorCustomizations": {
        // for the editor gutter:
        "editorGutter.addedBackground": "#00cf00",
        "editorGutter.modifiedBackground": "#0080ff",
        "editorGutter.deletedBackground": "#cf0000",
        "editorGutter.addedSecondaryBackground": "#00cf00",
        "editorGutter.modifiedSecondaryBackground": "#0080ff",
        "editorGutter.deletedSecondaryBackground": "#cf0000",
        // for the minimap:
        "minimapGutter.addedBackground": "#00cf00",
        "minimapGutter.modifiedBackground": "#0080ff",
        "minimapGutter.deletedBackground": "#cf0000",
        // for the editor scrollbar
        "editorOverviewRuler.addedForeground": "#00cf00",
        "editorOverviewRuler.modifiedForeground": "#0080ff",
        "editorOverviewRuler.deletedForeground": "#cf0000",
        // for the Explorer View, Source Control View, and tab handles
        "gitDecoration.addedResourceForeground": "#00cf00",
        "gitDecoration.modifiedResourceForeground": "#0080ff",
        "gitDecoration.deletedResourceForeground": "#cf0000",
        "gitDecoration.stageAddedResourceForeground": "#00cf00",
        "gitDecoration.stageModifiedResourceForeground": "#0080ff",
        "gitDecoration.stageDeletedResourceForeground": "#cf0000",
        // bonus:
        "gitDecoration.conflictingResourceForeground": "#ff0000",
        "gitDecoration.ignoredResourceForeground": "#ff0000",
        "gitDecoration.renamedResourceForeground": "#ff0000",
        "gitDecoration.submoduleResourceForeground": "#ff0000",
        "gitDecoration.untrackedResourceForeground": "#ff0000",
    }
    

    The values above are just placeholders. Adjust them to your liking.