Skip to content
This repository was archived by the owner on Aug 14, 2024. It is now read-only.

mvahaste/vscode-custom-css

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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 (1)

Suggest widget (0)

Suggest Widget (0)

Parameter hint

Parameter hint

GitLive tooltip

GitLive tooltip

Command palette

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

About

Custom CSS to make VSCode look nicer

Topics

Resources

Stars

Watchers

Forks

Languages