Vscode Advanced Tweaks

💻 Installation

To install the new version:

• First, install the extensions: Custom CSS and JS Loader, Dracula Official Theme, and Helium Icon Theme. Activate the Dracula theme and apply Helium Icons for the explorer. Follow the instructions on the custom css and js loader extension to make it work
• Second, copy and paste the contents of settings-custom.json into your settings.json in vscode. Replace the file path with the path to your custom css file
• Third, download or copy the contents of custom.css into the custom css file linked into the path in settings.json
• Reload custom css and js loader extension

To use the old version:

• Copy and paste the contents of settings.json into your settings.json file in vscode

🎨 My setup using custom css and js extension looks like this:

• Changed command palette
• Changed status bar
• Added dashboard
• Removed highlight from active tab and rounded them a bit. Also removed box shadow under tab bar when scrolling
• Made tab and explorer title bars smaller to allow for more coding space. Also changed font sizes and font weights to make them more clear
• Added colour changes for the vim extension
• Removed a few more extra icons

New Version 2

• Different status bar similar to Neovims one
• Made tab heights smaller and changed font style
• Uses custom2.css

Insert mode

Visual mode

Replace mode

👴 My old vscode setup that requires no custom css extension: