Fixing VSCode with custom CSS

Because I like minimalist editing experience, I wasn’t satisfied with how the default VSCode looked like. After a few changes made here and there I quickly started to realize how little VSCode allows me to customize in that respect.

You can’t change the font size of the bottom status bar. You can’t even change font family of the explorer tree! All my dreams about Sublime Text-like visual look were gone. Until one day I discovered Custom CSS and JS!

Selection highlight

VSCode provides two separate mechanisms for occurrences highlighting. The problem arises when both of them kick in and then things get really hard to differentiate. Here’s what I’m talking about:

By applying some custom CSS magic we can change the word occurrence highlight style to dashed underline:

css
.monaco-editor .wordHighlight {
    border-width: 1px;
    border-style: none none dashed none;
}
.monaco-editor .wordHighlightStrong {
    border-width: 1px;
    border-style: none none dashed none;
}
.monaco-editor .wordHighlightText {
    border-width: 1px;
    border-style: none none dashed none;
}

css
.monaco-editor .wordHighlight {
    border-width: 1px;
    border-style: none none dashed none;
}
.monaco-editor .wordHighlightStrong {
    border-width: 1px;
    border-style: none none dashed none;
}
.monaco-editor .wordHighlightText {
    border-width: 1px;
    border-style: none none dashed none;
}

and adjust the selection colors with theme override:

jsonc
{
  "workbench.colorCustomizations": {
    "[Default Dark+]": {
      // find highlight
      "editor.findMatchBackground": "#f59f0b55",
      // occurrences highlight
      "editor.wordHighlightBackground": "#0000", // disable
      "editor.wordHighlightBorder": "#ffffff68",
      "editor.wordHighlightStrongBackground": "#0000", // disable
      "editor.wordHighlightStrongBorder": "#ffffff68",
    }
  }
}

jsonc
{
  "workbench.colorCustomizations": {
    "[Default Dark+]": {
      // find highlight
      "editor.findMatchBackground": "#f59f0b55",
      // occurrences highlight
      "editor.wordHighlightBackground": "#0000", // disable
      "editor.wordHighlightBorder": "#ffffff68",
      "editor.wordHighlightStrongBackground": "#0000", // disable
      "editor.wordHighlightStrongBorder": "#ffffff68",
    }
  }
}

once we are here why not make all the selections rounded? 🥷

css
.selectionHighlight,
.findMatch,
.currentFindMatch,
.hoverHighlight {
    border-radius: 3px !important;
}

css
.selectionHighlight,
.findMatch,
.currentFindMatch,
.hoverHighlight {
    border-radius: 3px !important;
}

and now things look much better, aren’t they?

Scrollbars

Can’t we make the scrollbars thinner please?

css
/* editor scroll bars */
.monaco-scrollable-element .scrollbar>.slider {
    border-radius: 5px
}
.monaco-scrollable-element .scrollbar.horizontal {
    margin-bottom: -5px !important
}
.monaco-scrollable-element .scrollbar.horizontal>.slider {
    height: 5px !important
}
.monaco-scrollable-element .scrollbar.vertical>.slider {
    width: 5px !important;
    margin-left: 5px !important
}
/* terminal scrollbars */
.xterm-viewport::-webkit-scrollbar {
    width: 5px !important;
}
.xterm-viewport::-webkit-scrollbar-thumb {
    border-radius: 5px !important;
}

css
/* editor scroll bars */
.monaco-scrollable-element .scrollbar>.slider {
    border-radius: 5px
}
.monaco-scrollable-element .scrollbar.horizontal {
    margin-bottom: -5px !important
}
.monaco-scrollable-element .scrollbar.horizontal>.slider {
    height: 5px !important
}
.monaco-scrollable-element .scrollbar.vertical>.slider {
    width: 5px !important;
    margin-left: 5px !important
}
/* terminal scrollbars */
.xterm-viewport::-webkit-scrollbar {
    width: 5px !important;
}
.xterm-viewport::-webkit-scrollbar-thumb {
    border-radius: 5px !important;
}

Quick picker

What about quick picker?

wouldn’t we all appreciate some background blur?

Summary

As you can see sky is the limit. I didn’t list all the changes I came up with, for that I refer you to minimal-vscode-styles.

Happy hacking your own custom CSS!