Dark, Transparent Visual Studio Code

TL;DR

Install the following packages in to Visual Studio Code (VSC):

• Night Owl (no italics) theme – enable with Ctrl+Shift+P to enter command line.
• GlassIt Alpha – Set to 225 in User Settings
• Window Title Bar Style = Custom
• Workbench Icon Theme = vscode-icons

Introduction

If you are like me and prefer coding in a dark, slightly transparent GUI then follow these instructions.

Install GlassIt Extension

First, let’s install the GlassIt-VSC Extension. This extension allows VSC to operate with a transparent window in Windows 10.

Open Visual Studio Code (VSC). In the right-hand vertical menu, select Extensions (5th icon down below Explorer, Search, Source Control, and Debug). The Extensions manager will open. Type in “GlassIt” in to the search bar. Wait for GlassIt-VSC to show up and click install.

Restart VSC.

Under File > Preferences > Settings > User Settings subwindow on RHS you can enter the following lines of code to fine-tune your GlassIt extension:

"glassit.alpha": 225

You should now have a slightly transparent VSC window!

Set Theme

Go to File > Preferences > Color Theme. Select Dark (Visual Studio).

Another nice, very dark, but vibrant theme is the Monokai Vibrant Theme. Use the Extension Manager again to search for and install the theme. Use the Color Theme menu to select it and enable it. I also really like the Abyss dark theme; but currently my favourite is the Night Owl (no italics) theme.

Get Pretty Icons

Go to Extension Manager and search for “icons“. Find and install vscode-icons. Restart after it finishes installing. Then go to File > Preferences > File Icon Theme and select vscode-icons from the list.

Fix White Menus and Menu Bar

You will probably notice that the menu bar and in fact, all menus, are still white. Ugly.

This took me several minutes of google searching to find the solution. This article here led me in the right direction.

First, go to File > Preferences > Settings. Under User Settings you will see a long, long list of settings beginning with Commonly Used, Editor, Workbench, Window, etc… Expand the Window section:

Scroll all the way down to the bottom of this section and you should see a setting that says: “window.titleBarStyle”: “native”.

Edit that to say “custom” instead of “native”.

Help! I can’t edit in read only mode.

If it says “cannot edit in read-only mode” then hopefully you should have another panel to the right (left panel reads Default User Settings, while the right panel reads User Settings). Place your settings here to overwrite the Default Settings. Scroll down to just above the bottom bracket “}” and enter:

"window.titleBarStyle": "custom"

While you are in there you can also adjust the transparency of your window. I prefer 225 but the default is 220:

"glassit.alpha": 225

Here is a complete list of the User Settings I use:

Click Save and Restart VSC.

Your VSC should now look like this:

How Do I Change My Terminal Output Font?

Go back in to User Settings and add this line of code:

"terminal.integrated.fontFamily": "Consolas",
"terminal.integrated.fontSize": 11,
"terminal.integrated.lineHeight": 1,
"terminal.integrated.rendererType": "dom"

If find the fallback terminal “dom” runs much faster and smoother. Often, VSC itself will prompt and recommend you change the terminal.

Troubleshooting

Terminal Conda List Doesn’t Work

Check that your VSC Workspace is currently pointed to Anaconda. Go to File > Preferences > Settings. On the right hand side where it says User Settings, Workspace Settings,

See Also

Medium

https://dev.to/thegeoffstevens/vs-code-settings-you-should-customize-5e75

 

View at Medium.com

View at Medium.com

View at Medium.com