Colored pixels in scrollbar in VS Code

Question

I've recently started using VS Code, and I've noticed that there are little colored pixels that show up in the scroll bar like this:

They seem to indicate something about the source code, but I haven't been able to find the documentation for this. So my questions are as follows:

• What is the name of this feature?
• Where is it documented?
• Can this feature be disabled, and if so, how?

EDIT:

• After reading @idleberg's answer, I set scm.diffDecorations to "none" and restarted VS Code, reopened files, etc, but the decorations still persist.
• I followed the link in @Moffen's answer and I set "editor.hideCursorInOverviewRuler" to true, but it turns out that controls a different feature. Also, I already had "editor.minimap.enabled" set to false, but the minimap is a different feature from the scrollbar decorations.
• I'm running Version 1.23.1 of VS Code on Ubuntu 18.04.

Answer 1

Based on the various comments made here

It seems there is no actual option disable those colors once and for all, but you can hide its border, hide the display of the cursor and set all otherwise displayed colors to a fully transparent black (invisible color).

This distilled config that you can enter in the settings' JSON view works for me (VS Code 1.74.2)

{
 "editor.hideCursorInOverviewRuler": true,
 "editor.overviewRulerBorder": false,
 "workbench.colorCustomizations": {
    "editorOverviewRuler.border": "#0000",
    "editorOverviewRuler.findMatchForeground": "#0000",
    "editorOverviewRuler.rangeHighlightForeground": "#0000",
    "editorOverviewRuler.selectionHighlightForeground": "#0000",
    "editorOverviewRuler.wordHighlightForeground": "#0000",
    "editorOverviewRuler.wordHighlightStrongForeground": "#0000",
    "editorOverviewRuler.modifiedForeground": "#0000",
    "editorOverviewRuler.addedForeground": "#0000",
    "editorOverviewRuler.deletedForeground": "#0000",
    "editorOverviewRuler.errorForeground": "#0000",
    "editorOverviewRuler.warningForeground": "#0000",
    "editorOverviewRuler.infoForeground": "#0000",
    "editorOverviewRuler.bracketMatchForeground": "#0000"
  }
}

Answer 2

These decorators indeed indicate changes in your source. Green marks code added, red marks code removed. You can disable this in your settings under the key scm.diffDecorations (possible value: all, gutter, overview, none.)

To hide the indicators from the scrollbar, you can override the theme styles to make the indicators transparent:

"workbench.colorCustomizations": {
    // Scrollbar
    "editorOverviewRuler.addedForeground": "#0000",
    "editorOverviewRuler.modifiedForeground": "#0000",
    "editorOverviewRuler.deletedForeground": "#0000",

    // Gutter (same as tweaking scm.diffDecorations?)
    "editorGutter.addedBackground": "#0000",
    "editorGutter.modifiedBackground": "#0000",
    "editorGutter.deletedBackground": "#0000"
}

Note: the example uses the #RGBA shorthand rather than #RRGGBBAA

Answer 3

The feature is called Overview Ruler. I've been unable to find specific documentation except some sparse notes:

If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.

Related settings include:

// Controls if the cursor should be hidden in the overview ruler.
"editor.hideCursorInOverviewRuler": false,

// Controls if a border should be drawn around the overview ruler.
"editor.overviewRulerBorder": true,

// Controls the number of decorations that can show up at the same position in the overview ruler
"editor.overviewRulerLanes": 3

… but also some configurable colours, which is the most thorough explanation I've found:

Overview ruler

This ruler is located beneath the scroll bar on the right edge of the editor and gives an overview of the decorations in the editor.

• editorOverviewRuler.border: Color of the overview ruler border.
• editorOverviewRuler.findMatchForeground: Overview ruler marker color for find matches. The color must not be opaque to not hide underlying decorations.
• editorOverviewRuler.rangeHighlightForeground: Overview ruler marker color for highlighted ranges, like by the Quick Open, Symbol in File and Find features. The color must not be opaque to not hide underlying decorations.
• editorOverviewRuler.selectionHighlightForeground: Overview ruler marker color for selection highlights. The color must not be opaque to not hide underlying decorations.
• editorOverviewRuler.wordHighlightForeground: Overview ruler marker color for symbol highlights. The color must not be opaque to not hide underlying decorations.
• editorOverviewRuler.wordHighlightStrongForeground: Overview ruler marker color for write-access symbol highlights. The color must not be opaque to not hide underlying decorations.
• editorOverviewRuler.modifiedForeground: Overview ruler marker color for modified content.
• editorOverviewRuler.addedForeground: Overview ruler marker color for added content.
• editorOverviewRuler.deletedForeground: Overview ruler marker color for deleted content.
• editorOverviewRuler.errorForeground: Overview ruler marker color for errors.
• editorOverviewRuler.warningForeground: Overview ruler marker color for warnings.
• editorOverviewRuler.infoForeground: Overview ruler marker color for infos.
• editorOverviewRuler.bracketMatchForeground: Overview ruler marker color for matching brackets.

Answer 4

The green marks are changes that you have saved, yellow marks are changes that have not been saved. Red marks the location of errors.

You can see how to disable features here