CODEWITHSUNDEEP
visual-studio-code
MaxOk
MaxOk

Reputation: 449

Is there a way to make the Visual Studio Code window transparent?

A have a small resolution on my PC so it's not very convenient to work with several tabs open at the same time, like having an open console window, a browser, a code editor, and some other stuff.

Console has a very cool feature: a transparent background. So, it's very very comfortabe to type something on the console while looking to some learning material in the browser through the transparent background.

I guess if there is a way to make VS Code transparent so I can write code and research in the browser at the same time, instead of Alt-Tabing any time I have to switch, so I dont have to interrupt my workflow often.

Upvotes: 34

Views: 80761

Answers (5)

mehrdad-mixtape
mehrdad-mixtape

Reputation: 66

If your in Linux(Debian), Install this: Glassit Linux

Don't remember Install requirements:

sudo apt install -y wmctrl x11-utils bash

Upvotes: 0

VonC
VonC

Reputation: 1323243

All the possible solutions are in:

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") )
)
)

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)

Upvotes: 4

Mayur Satav
Mayur Satav

Reputation: 1092

Use VS Code extension

GlassIt-VSC

enter image description here search in extension search bar

just install and enjoy it works great !

Upvotes: 32

Alex
Alex

Reputation: 67493

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

  1. Install AutoHotkey
  2. Create file transparency.ahk
  3. Place inside this file:
^!RButton::
WinGet, currentTransparency, Transparent, A
if (currentTransparency = OFF)
{
    WinSet, Transparent, 150, A
}
else
{
    WinSet, Transparent, OFF, A
}
return

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

  2. Add this script to startup folder (Win+R shell:common startup)

    enter image description here

Based on: https://superuser.com/questions/272812/simple-transparency-toggle-with-autohotkey

Upvotes: 11

help-info.de
help-info.de

Reputation: 7260

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:

Notepad++ - Code Editor sample and transparency:

Upvotes: 3

Related Questions