Indent White Space

Enlarge the rendering of indentation spaces.

For High Contract Themes the decoration is a double border under the enlargement.

Known Problem:
When using command Preferences: Color Theme (ctrl+k ctrl+t, workbench.action.selectTheme) the settings.json file is not updated with the new theme name when you use the Up/Down Arrow keys. The decorator style is not changed when you switch between Ligh/Dark and High Contrast themes. When you select a theme the decorator style is changed.
The reason is that for the current version of VSC (v1.74) it is not possible to define a decorator that has different styles for Light/Dark and High Contrast Themes. A High Contrast Theme uses the light or dark settings of the decorator.

Settings

• indentWhitespace.space.enlargement : the number of spaces to enlarge each indent space, if 0 there is no decoration, (default: 1)
  It can be a number ∈ ℕ (>= 0) or it can be an object where you specify the number by languagId of the editor.
  The properties of the object can be:
  • default : the value to use for all languageId's not specified
  • , separated list of languageId's that will use the given value

      "indentWhitespace.space.enlargement": {
        "default": 0,
        "html": 1,
        "jsonc": 1,
        "python,javascript": 2
      }
    

    Be aware that setting objects are merged: Global - Workspace - Folder
• indentWhitespace.space.positionDecorator : [ "before" | "after" ] Position of the indent space decorator, (default: "after")

The extension defines the following Theme Color:

• indentWhitespace.space.enlargement : Color for the indent space decoration.

A Theme Color can be customized in your settings.json:

You can change the default decoration color and/or specify a decoration color based on theme name:

  "workbench.colorCustomizations": {
      "indentWhitespace.space.enlargement": "#44444420",
      "[Monokai*]": {
          "indentWhitespace.space.enlargement": "#00ff0020"
      },
      "[*Light*]": {
          "indentWhitespace.space.enlargement": "#aaaaaa20"
      }
  }