Making VS Code Aesthetically Transparent ✨

A while back I saw this ASMR-esque coding video by "devaslife" on Youtube. I instantly fell in love with how stunning his code editor looked.

While scouring the web for sources on how to apply the same visual effect to VS Code, I stumbled across this extension: Vibrancy Continued

Here's a sample screenshot of what VS Code looks like with the extension installed:

Apparently, this extension is a continuation of a prior extension named Vibrancy. However, the latter project is no longer maintained.

This extension is compatible with both MacOS and Windows.

Here's how you install:

1. Make sure the color theme you selected is the 'Dark+ (default)'. You can verify by using the shortcut Ctrl/Command + Shift + P, and type Theme, then select Preferences: Color Theme to select the required theme

2. Install this extension from the Visual Studio Code Marketplace.

3. Press F1 and Activate command "Reload Vibrancy"

4. Restart.

⚠️ Note: You'll need to re-enable Vibrancy every time VS Code is updated.

I've personally set its opacity to 0 and I feel this looks the most aesthetically pleasing as it adds a beautiful Gaussian blur to whatever appears behind the current window.

To change the default opacity, open VS Code settings JSON file and add this line:

"vscode_vibrancy.opacity": 0.0

And there you go, now you have a visually stunning edition of VS Code!