Skip to content

Instantly share code, notes, and snippets.

@samdenty
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.
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 }
@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