Colored pixels in scrollbar in VS Code

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.

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


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