VSCode Custom CSS

Custom CSS for VSCode for some visual improvements, just my personal preferences, easily configurable to your liking. Should work okay with most themes, but no guarantees. Only tested on Windows.

Features

This CSS file adds rounded borders and/or background blur and box shadows to the following elements:

IntelliSense suggestions & details widget (two versions, toggleable in :root)
Parameter hints widget
Editor hover tooltips
Command palette
Files/extensions/etc
Minimap slider
Breadcrumbs widget
Hide the VSCode icon in the title bar

Screenshots

Suggest widget (1)

Suggest widget (0)

Parameter hint

GitLive tooltip

Command palette

Screenshots are taken with the Github Dark theme.

Installation

Install the Custom CSS and JS Loader extension.

Add the following to your settings.json:

"vscode_custom_css.imports": [
  "file:///path/to/vscode-custom-css/custom.css"
],

Extra

Theme tweaks

My changes to the One Dark Pro Darker theme to make it just a little nicer. To use, add the following to your settings.json:

"workbench.colorCustomizations": {
  "[One Dark Pro Darker]": {
    "editor.background": "#1e2227",
    "sideBar.background": "#191d22",
    "list.inactiveSelectionBackground": "#2d333d",
    "list.hoverBackground": "#2d333d80",
    "titleBar.activeBackground": "#1e2227",
    "sideBarSectionHeader.background": "#1e2227",
    "terminal.background": "#1e2227"
  }
},
"editor.tokenColorCustomizations": {
  "[One Dark Pro Darker]": {
    "comments": "#5c6370",
    "textMateRules": [
      {
        "scope": "comment",
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  }
}

Customization tips

Toggle the developer tools from the command palette to view element classes, properties, etc. Use the inspecter to target specific elements.

The JavaScript snippet below can make it easier to inspect elements that don't play nice, just paste it into the console and VSCode will be paused in debug mode after a 3 second delay. Close the developer tools to resume.

setTimeout(function () {
	debugger;
}, 3000);

mvahaste / vscode-custom-css Goto Github PK