https://github.com/mvahaste/vscode-custom-css

Custom CSS to make VSCode look nicer
https://github.com/mvahaste/vscode-custom-css

css custom-css theme vscode vscode-css vscode-theme

Last synced: 6 days ago
JSON representation

Custom CSS to make VSCode look nicer

• Host: GitHub
• URL: https://github.com/mvahaste/vscode-custom-css
• Owner: mvahaste
• Created: 2022-12-03T22:11:08.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-22T11:34:58.000Z (almost 2 years ago)
• Last Synced: 2023-03-22T20:22:28.258Z (over 1 year ago)
• Topics: css, custom-css, theme, vscode, vscode-css, vscode-theme
• Language: CSS
• Homepage:
• Size: 230 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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)](/screenshots/suggest-widget-1.png)

  Suggest widget (0)

![Suggest Widget (0)](/screenshots/suggest-widget-0.png)

  Parameter hint

![Parameter hint](/screenshots/tooltip.png)

  GitLive tooltip

![GitLive tooltip](/screenshots/gitlive-tooltip.png)

  Command palette

![Command palette](/screenshots/command-palette.png)

Screenshots are taken with the [Github Dark](https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme) theme.

## Installation

Install the [Custom CSS and JS Loader](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css) extension.

Add the following to your `settings.json`:

```json

"vscode_custom_css.imports": [

  "file:///path/to/vscode-custom-css/custom.css"

],

```

## Extra

### Theme tweaks

My changes to the [One Dark Pro Darker](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) theme to make it just a little nicer. To use, add the following to your `settings.json`:

```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.

```js

setTimeout(function () {

	debugger;

}, 3000);

```