Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VS Code CSS addition to increase readability on file tree.

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

Custom CSS

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.
: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 }
@Epikem
Copy link

Epikem commented Mar 17, 2018

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

Loading

@ogardiazabal
Copy link

ogardiazabal commented Mar 21, 2018

Loading

@Epikem
Copy link

Epikem commented Mar 26, 2018

Current version has small problem with zoom. Some of 1px line does not shown when zoomed out. changing :before and :after fixes it.

.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);
}

solution from here : https://stackoverflow.com/questions/33740182/how-to-fix-zoom-issues-with-google-chrome-and-1px-width-height-divs

And z-index: 1 makes scroll bar impossible to click. Making z-index to 0 seems good to me.

.explorer-folders-view .monaco-tree-row .content {
	z-index: 0
}

Loading

@samdenty
Copy link
Author

samdenty commented Mar 28, 2018

Thanks @Epikem, updated the gist 😃

Loading

@ehavener
Copy link

ehavener commented May 14, 2018

This is awesome, just saying thanks!

Loading

@Rycochet
Copy link

Rycochet commented Aug 3, 2018

You should be able to add pointer-events: none to the :before and :after pseudo-elements to stop them interfering with the clicking.

I also find that reducing the width of the horizontal lines looks better by not overlapping the filetype icon, or the closed/open triangle -

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

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

Loading

@ivopauly
Copy link

ivopauly commented Aug 10, 2018

Thanks @Rycochet that last CSS rule made my frustration go away!

Loading

@pie6k
Copy link

pie6k commented Aug 24, 2018

Do you think guys it'd be hard to make all-in-one extension that would just do it all in one step?

Loading

@abdellatifLabr
Copy link

abdellatifLabr commented Sep 22, 2018

how can i edit the margin between folders and files names?

Loading

@lqueryvg
Copy link

lqueryvg commented Nov 11, 2018

Great workaround - it's amazing that this is not already built into vscode.
It's like the fog has lifted.

image

Is it possible to get rid of that dangling line on the left ? It would improve the clarity.
It's visible when the last item in an an expanded folder is also an expanded folder.

Loading

@shreeve
Copy link

shreeve commented Jan 11, 2019

The hierarchical lines are impossible to get right. I gave up and just focused on improving the indentation.

The result looks a lot better and is far simpler than trying to fix the lines. The file to edit is (on macOs) is:

/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.css:

:root { --tree-width: 20px; }
.explorer-folders-view .monaco-tree-row { overflow: visible !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "1"] { padding-left: calc( 0 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "2"] { padding-left: calc( 1 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "3"] { padding-left: calc( 2 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "4"] { padding-left: calc( 3 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "5"] { padding-left: calc( 4 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "6"] { padding-left: calc( 5 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "7"] { padding-left: calc( 6 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "8"] { padding-left: calc( 7 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level= "9"] { padding-left: calc( 8 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="10"] { padding-left: calc( 9 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="11"] { padding-left: calc(10 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="12"] { padding-left: calc(11 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="13"] { padding-left: calc(12 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="14"] { padding-left: calc(13 * var(--tree-width)) !important; }
.explorer-folders-view .monaco-tree-row[aria-level="15"] { padding-left: calc(14 * var(--tree-width)) !important; }

The final result looks like:

form ts src unsupported 2019-01-11 02-16-17

Loading

@Satch09
Copy link

Satch09 commented Jan 26, 2019

Awesome! This is just what I have been looking for! Thank you!

Loading

@YusifKhalilov
Copy link

YusifKhalilov commented Feb 6, 2019

This trick is not working after 2019 January update

Loading

@Lightfire228
Copy link

Lightfire228 commented Feb 7, 2019

I've fixed it to work with the new Jan 2019 update
There were 3 main fixes I added,

  1. The tree row class was updated from monaco-tree-row to monaco-list-row
  2. In the custom css file, line 21, the monica-tree-row had a position: relative rule, which caused vertical spacing issues
  3. The .monaco-tl-twistie div had an inline margin-left: 40px rule, which I had to override (line 15)

https://gist.github.com/Lightfire228/39dc2cf403237a190e79a000912691b2

I used this gist as a base, but you may have to tweak it to get it to look 'right'

Edit: I fixed an issue with the lines disappearing on when hovering or selecting a folder more than 3 deep

Loading

@akmeghdad
Copy link

akmeghdad commented Feb 9, 2019

Loading

@lucaspar
Copy link

lucaspar commented Feb 23, 2019

Path for workbench.main.css in Linux: /usr/share/code/resources/app/out/vs/workbench/workbench.main.css.

If not found, try running

locate workbench.main.css

Loading

@BangBuster
Copy link

BangBuster commented Jul 5, 2019

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

Loading

@thehaystacker
Copy link

thehaystacker commented Sep 5, 2019

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

Loading

@atipezda
Copy link

atipezda commented Sep 5, 2019

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

Loading

@stefanfoulis
Copy link

stefanfoulis commented Mar 11, 2021

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.

Loading

@victorbrca
Copy link

victorbrca commented Oct 12, 2021

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment