VS Code CSS addition to increase readability on file tree.

README.MD

How to install

Custom CSS plugin

Install the custom CSS plugin, then make a file on your computer that will hold your custom CSS, I like to make one in my home directory called ~/.vscodestyles.css and then add the CSS into it.

Once done, open your command palette and select enable custom CSS and JS

Screenshot

Manually editing workbench.main.css

Open up C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css in a text edit and then add the CSS into it.

What does it do

It adds the missing tree functionality to VSCode

• The last tree item gets the bottom line removed
• Lines are almost transparent normally, but increase in opacity on hover
• CSS variables to make it easy to change the colors, line width etc.

styles.css

:root {
  /** Width of the lines **/
  --tree-width: 14px;
  /** Opacity of the lines whilst not hovered **/
  --tree-opacity: 0.1;
  /** Opacity of the lines on hover **/
  --tree-opacity-hover: 0.3;
  /** Color of the lines **/
  --tree-color: rgb(255, 255, 255);
}

.explorer-folders-view .monaco-tree-row {
  overflow: visible !important;
  position: relative;
}

.explorer-folders-view .monaco-tree-row:before {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: 0px;
  top: -10px;
  height: 100%;
  transition: opacity 0.1s linear;
  border-left: 1px solid var(--tree-color);
}

.explorer-folders-view .monaco-tree-row:after {
  content: '';
  background: var(--tree-color);
  opacity: var(--tree-opacity);
  position: absolute;
  width: 18px;
  height: 0px;
  top: 50%;
  transition: opacity 0.1s linear;
  border-top: 1px solid var(--tree-color);
}

.explorer-folders-view:hover .monaco-tree-row:before,
.explorer-folders-view:hover .monaco-tree-row:after {
  opacity: var(--tree-opacity-hover);
}

.explorer-folders-view .monaco-tree-row:not(.has-children):after {
  width: calc(var(--tree-width) * 2 + 3px);
}

.explorer-folders-view .monaco-tree-row:not([aria-level='1']):not([aria-level='2']):before {
  box-shadow: -20px 0 0 0 var(--tree-color), -40px 0 0 0 var(--tree-color),
    -60px 0 0 0 var(--tree-color), -80px 0 0 0 var(--tree-color),
    -100px 0 0 0 var(--tree-color), -120px 0 0 0 var(--tree-color),
    -140px 0 0 0 var(--tree-color), -160px 0 0 0 var(--tree-color),
    -180px 0 0 0 var(--tree-color), -200px 0 0 0 var(--tree-color),
    -220px 0 0 0 var(--tree-color), -240px 0 0 0 var(--tree-color),
    -260px 0 0 0 var(--tree-color);
}

.explorer-folders-view .monaco-tree-row[aria-level="1"]  { padding-left:   0px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="2"]  { padding-left:  20px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="3"]  { padding-left:  40px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="4"]  { padding-left:  60px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="5"]  { padding-left:  80px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="6"]  { padding-left: 100px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="7"]  { padding-left: 120px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="8"]  { padding-left: 140px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="9"]  { padding-left: 160px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: 180px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: 200px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: 220px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: 240px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: 260px !important; }
.explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: 280px !important; }

.explorer-folders-view .monaco-tree-row[aria-level="1"]:before, .monaco-tree-row[aria-level="1"]:after { display: none; }
.explorer-folders-view .monaco-tree-row[aria-level="2"]:before, .monaco-tree-row[aria-level="2"]:after { left: calc(-30px + (2 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="3"]:before, .monaco-tree-row[aria-level="3"]:after { left: calc(-30px + (3 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="4"]:before, .monaco-tree-row[aria-level="4"]:after { left: calc(-30px + (4 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="5"]:before, .monaco-tree-row[aria-level="5"]:after { left: calc(-30px + (5 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="6"]:before, .monaco-tree-row[aria-level="6"]:after { left: calc(-30px + (6 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="7"]:before, .monaco-tree-row[aria-level="7"]:after { left: calc(-30px + (7 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="8"]:before, .monaco-tree-row[aria-level="8"]:after { left: calc(-30px + (8 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="9"]:before, .monaco-tree-row[aria-level="9"]:after { left: calc(-30px + (9 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="10"]:before, .monaco-tree-row[aria-level="10"]:after{ left: calc(-30px + (10 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="11"]:before, .monaco-tree-row[aria-level="11"]:after{ left: calc(-30px + (11 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="12"]:before, .monaco-tree-row[aria-level="12"]:after{ left: calc(-30px + (12 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="13"]:before, .monaco-tree-row[aria-level="13"]:after{ left: calc(-30px + (13 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="14"]:before, .monaco-tree-row[aria-level="14"]:after{ left: calc(-30px + (14 * 20px)); margin-left: 3px }
.explorer-folders-view .monaco-tree-row[aria-level="15"]:before, .monaco-tree-row[aria-level="15"]:after{ left: calc(-30px + (15 * 20px)); margin-left: 3px }

Updated for June 2019 (version 1.36) (Tested on Seti Icon theme)
https://gist.github.com/BangBuster/9397e91b99813730a972710edd03d0cb

For Windows: go to C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css, open workbench.main.css and append.

What about Mac

@thehaystacker
Right-click on vs code in finder in Applications and click "Show Package Contents." there you go same path as windows

If you only want to indent a bit more, vscode now has the workbench.tree.indent setting built-in. I changed mine from 8 to 16 (px) and it is already much more readable.

Is this still working on the latest version of Visual Studio Code (1.61)?