VS Code CSS addition to increase readability on file tree.

README.MD

How to install

Use the Custom CSS plugin (recommended)

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

OR Manually edit 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.

Forked to add ability to change indent of tree items

styles.css

:root {
    /** Width of the lines **/
    --tree-width: 14px;
    /** Opacity of the lines whilst not hovered **/
    --tree-opacity: .1;
    /** Opacity of the lines on hover **/
    --tree-opacity-hover: .3;
    /** Color of the lines **/
    --tree-color: rgb(255, 255, 255);
    /** Left indent of tree items **/
    --tree-indent: 30px;
  }
  
  .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 .5s 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: calc(var(--tree-indent) * 0.75);
    height: 0px;
    top: 50%;
    transition: opacity .5s 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);
    transition: opacity .5s linear;
  }
  
  .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: 
      calc(var(--tree-indent) * -1) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -2) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -3) 0 0 0 var(--tree-color), 
      calc(var(--tree-indent) * -4) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -5) 0 0 0 var(--tree-color), 
      calc(var(--tree-indent) * -6) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -7) 0 0 0 var(--tree-color), 
      calc(var(--tree-indent) * -8) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -9) 0 0 0 var(--tree-color), 
      calc(var(--tree-indent) * -10) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -11) 0 0 0 var(--tree-color), 
      calc(var(--tree-indent) * -12) 0 0 0 var(--tree-color),
      calc(var(--tree-indent) * -13) 0 0 0 var(--tree-color);
  }
  
  .explorer-folders-view .monaco-tree-row[aria-level="1"]  { padding-left: calc(var(--tree-indent) * 0) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="2"]  { padding-left: calc(var(--tree-indent) * 1) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="3"]  { padding-left: calc(var(--tree-indent) * 2) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="4"]  { padding-left: calc(var(--tree-indent) * 3) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="5"]  { padding-left: calc(var(--tree-indent) * 4) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="6"]  { padding-left: calc(var(--tree-indent) * 5) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="7"]  { padding-left: calc(var(--tree-indent) * 6) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="8"]  { padding-left: calc(var(--tree-indent) * 7) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="9"]  { padding-left: calc(var(--tree-indent) * 8) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: calc(var(--tree-indent) * 9) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: calc(var(--tree-indent) * 10) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: calc(var(--tree-indent) * 11) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: calc(var(--tree-indent) * 12) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: calc(var(--tree-indent) * 13) !important; }
  .explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: calc(var(--tree-indent) * 14) !important; }
  
  .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 }
  
  
  .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((var(--tree-indent) * -1.5) + (var(--tree-indent) * 2));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="3"]:before,
  .monaco-tree-row[aria-level="3"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 3));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="4"]:before,
  .monaco-tree-row[aria-level="4"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 4));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="5"]:before,
  .monaco-tree-row[aria-level="5"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 5));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="6"]:before,
  .monaco-tree-row[aria-level="6"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 6));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="7"]:before,
  .monaco-tree-row[aria-level="7"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 7));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="8"]:before,
  .monaco-tree-row[aria-level="8"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 8));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="9"]:before,
  .monaco-tree-row[aria-level="9"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 9));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="10"]:before,
  .monaco-tree-row[aria-level="10"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 10));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="11"]:before,
  .monaco-tree-row[aria-level="11"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 11));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="12"]:before,
  .monaco-tree-row[aria-level="12"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 12));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="13"]:before,
  .monaco-tree-row[aria-level="13"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 13));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="14"]:before,
  .monaco-tree-row[aria-level="14"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 14));
      margin-left: 3px;
  }

  .explorer-folders-view .monaco-tree-row[aria-level="15"]:before,
  .monaco-tree-row[aria-level="15"]:after {
      left: calc((var(--tree-indent) * -1.5) + (var(--tree-indent) * 15));
      margin-left: 3px;
  }