Visual Studio Code transparent window? - text-editor

Question

A have a small resolution on my PC so it's not very convenient to work in several tabs at the same time like: open console window, browser, code editor and some other stuff.
Console has a very cool feature: a transparent background, so it's very very comfortabe to type something in console while looking to some learning material in browser through the trasparent background.
So I guessed if there any way to make VS Code transparent so i can write code and research in browser at the same time not Alt-Tabing any time I have to switch, so I dont have to interrupt my workflow such often.

Answer 1

Use VS Code extension
GlassIt-VSC
search in extension search bar
just install and enjoy
it works great !

Answer 2

Don't know about other OS but Windows can make any window transparent.
I've tried several 3rd party apps and stopped on AutoHotkey (free, Open-source, easy to learn, can be used for much more).
Install AutoHotkey
Create file transparency.ahk
Place inside this file:
^!RButton::
WinGet, currentTransparency, Transparent, A
if (currentTransparency = OFF)
{
WinSet, Transparent, 150, A
}
else
{
WinSet, Transparent, OFF, A
}
return
Run the script
This script will toggle active window transparency(0-255, 0 - transparent, 255 - opaque)
on Ctrl+Alt+Right mouse button
^ - Ctrl
! - Alt
RButton - Right mouse button
Add this script to startup folder (Win+R shell:common startup)
Based on: https://superuser.com/questions/272812/simple-transparency-toggle-with-autohotkey

Answer 3

As far as I know - this isn't possible in e.g. Visual Studio Express or VS Code.
It seems not to be on the feature request list at Microsoft.
One solution I see for you is Notepad++. Install the TopMost add-in. It works like you can see in following screenshot:

Answer 4

All the possible solutions are in:
"How to be cool and make Visual Studio Code (VSCode) transparent " from Emmanuel N Kyeyune
Mainly:
Windows 10
Install the GlassIt-VSC extension
In the VSCode settings (File > Preferences > Settings OR Ctrl + ,):
glassit.alpha (integer): Transparency level [1-255]
glassit.step (integer): Increment of alpha OR:
ctrl+alt+z to increase transparency and
ctrl+alt+c to decrease it as set by the extension
(take care it doesn't override some other shortcuts assigned these hotkeys)
Linux (tested on Ubuntu 18.04)
Based on devilspie
sudo apt-get install devilspie
with instruction like:
( if
( contains ( window_class ) "Code" )
( begin
( spawn_async (str "xprop -id " (window_xid) " -f _NET_WM_WINDOW_OPACITY 32c -set _NET_WM_WINDOW_OPACITY 0xdfffffff") )
)
)
PR 52707 "Windows, macOS and Linux transparency" from Charles Milette (sylveon).
The PR has been closed in August 2019:
We currently do not accept more features that are Electron specific. We have seen to many issues lately when updating to newer Electron versions and playing the catch-up game is very painful.
But said PR still includes a ton of options, like the Vibrancy extension.
Update Dec. 2021:
Chaim Eliyah mentions in the comments:
Vibrancy "works" for Mac OS X; it modifies the base CSS files so Microsoft will forever complain about your VSCode installation
(they tell you how to ignore the warning in the README)

Answer 5

If your in Linux(Debian), Install this: Glassit Linux
Don't remember Install requirements:
sudo apt install -y wmctrl x11-utils bash