Skip to content

Instantly share code, notes, and snippets.

@samdenty

samdenty/README.MD

Last active June 7, 2024 10:02
Show Gist options
  • Save samdenty/b96f4df576d05cb123248f8ebfa899b6 to your computer and use it in GitHub Desktop.
Save samdenty/b96f4df576d05cb123248f8ebfa899b6 to your computer and use it in GitHub Desktop.
Download ZIP
VS Code CSS addition to increase readability on file tree.
Raw
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

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

Epikem commented Mar 17, 2018 •
edited by samdenty
Loading

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

@ogardiazabal
Copy link

for white background interfaces: https://gist.github.com/ogardiazabal/39f8d70b9dd5858a067c4b70bffb9b2e

@Epikem
Copy link

Epikem commented Mar 26, 2018 •
edited
Loading

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
}

@samdenty
Copy link
Author

Thanks @Epikem, updated the gist 😃

@ehavener
Copy link

This is awesome, just saying thanks!

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

@ivopauly
Copy link

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

@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?

@abdellatifLabr
Copy link

abdellatifLabr commented Sep 22, 2018 •
edited
Loading

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

@lqueryvg
Copy link

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.

@shreeve
Copy link

shreeve commented Jan 11, 2019 •
edited
Loading

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

@Satch09
Copy link

Satch09 commented Jan 26, 2019

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

@YusifKhalilov
Copy link

This trick is not working after 2019 January update

@Lightfire228
Copy link

Lightfire228 commented Feb 7, 2019 •
edited
Loading

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

@akmeghdad
Copy link

akmeghdad commented Feb 9, 2019 •
edited
Loading

This code is working for vscode 1.31
https://gist.github.com/akmeghdad/b1208c2caa601f0ba29f953faabac709

@lucaspar
Copy link

lucaspar commented Feb 23, 2019 •
edited
Loading

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

@EilayDev
Copy link

EilayDev commented Jul 5, 2019

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

@thehaystacker
Copy link

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

@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

@stefanfoulis
Copy link

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.

@victorbrca
Copy link

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

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