Allow for transparent / vibrant window theme

[sergeysova]

Maybe it can be enabled with { transparent: true, vibrancy: 'dark' } ?

electron/electron#7898 — Vibrancy PR
https://electron.atom.io/docs/api/frameless-window/#transparent-window

[zmitry]

Awesome

[zbandhan]

Is it possible to make activity bar slightly thin? However I love it

[rianadon]

This is amazing. I'm not sure if something like this would be able to achieved on Windows as well (it might just take a lot more effort than MacOS), but it would fit in with the new Fluent Design System.

[bpasero]

@lestad do you have a working prototype of what you suggested via { transparent: true, vibrancy: 'dark' } ?

[sergeysova]

@bpasero I can try to make it

[bpasero]

@lestad so far I was not able to use the vibrancy effect of Electron, could also be related to the fact that we are not on latest Electron.

[sergeysova]

@bpasero I enabled vibrancy in VSCode 1.15

wnd.setVibrancy('dark'):

wnd.setVibrancy('ultra-dark')

[sergeysova]

// Open devTools in any vscode window
wnds = electron.remote.BrowserWindow.getAllWindows()
win = new electron.remote.BrowserWindow({ width: 600, height: 500, frame: false, transparent: true, vibrancy: 'dark', show: false })

// with wnds[0].getURL() find any window with title != "Code"
source = wnds[1]

win.loadURL(source.getURL())
win.show()
// next open and undock DevTools
win.openDevTools()

Next with Elements tab add that style before </body>:

<style>
.monaco-shell, .monaco-workbench
{
  background-color: transparent !important;
}
</style>

Then uncheck background-color in next elements:

• .monaco-workbench>.part.activitybar
• .monaco-workbench>.part.sidebar

That it:

[sergeysova]

Dark

[sergeysova]

Ultra Dark

[rianadon]

I tried this on Windows and unfortunately it doesn't work (so Electron's API for this must still be supported on only MacOS). However I did find an npm package named electron-vibrancy that supports Windows 10 and got the following results:

I had to disable the window frame because the vibrancy effect doesn't play well with it, so if this were to be implemented for Windows too some kind of custom titlebar would need to be added. I think there's already an open issue for that.

I don't know if there's any way to get more of a blur like @lestad's pictures which still look much better than I was able to get, but it's a step closer.

[bpasero]

@lestad followed your steps and cannot make it work, care to open a PR for me to test it out? Do I need to enable something in macOS to see it?

[sylveon]

@rianadon that's because it's using the undocumented SetWindowCompositionAttribute function in Windows. No you can't have a higher blur radius. BTW what you suggest is missing shadows, and you can't resize it by grabbing the window borders because you used transparent: true.

Here's an example with Discord:

If you look near the Explorer window, you can see the shadow is still there. The window was created with the following options:

    var mainWindowOptions = {
      title: "Discord",
      backgroundColor: '#00000000',
      width: DEFAULT_WIDTH,
      height: DEFAULT_HEIGHT,
      minWidth: MIN_WIDTH,
      minHeight: MIN_HEIGHT,
      transparent: false,
      frame: false,
      resizable: true,
      show: isVisible,
      thickFrame: true,
      webPreferences: {
        blinkFeatures: "EnumerateDevices,AudioOutputDevices"
      }
    };

And SetWindowCompositionAttribute was called like this:

HWND hWnd = FindWindow("Chrome_WidgetWin_1", NULL);
ACCENTPOLICY policy = { 3, 2, 0xaa000000, 0 }; // ACCENT_ENABLE_BLURBEHIND=3
WINCOMPATTRDATA data = { 19, &policy, sizeof(ACCENTPOLICY) }; // WCA_ACCENT_POLICY=19
SetWindowCompositionAttribute(hWnd, &data);

So now after creating a window like this and calling the API, any zone of your app that is transparent will have the blur effect and you still keep the shadow and resize borders on the window. The only remaining matter would be implementing a titlebar and drag area (maximise, minimize and Aero Snap is handled by Windows, something that using transparent: true (which electron-vibrancy absolutely requires) would require us to implement it ourselves)

I think a custom way for Windows would be better than using electron-vibrancy. However it seems fine to use it on macOS. BTW vibrancy support is now in official electron, so might as well completely drop electron-vibrancy: electron/electron#7898

[rianadon]

@sylveon My experiment was not a suggestion on the way VS Code should implement this; it was only to see if such a vibrancy effect was possible on Windows.

I used electron-vibrancy as my Electron and Windows API knowledge is quite limited. But as you said it has a few major shortcomings, so, should this be done well, using it wouldn't be a good idea.

I tried using options similar to what you suggested to get the effect with shadows, but for some reason the background of the window becomes solid black. I'm 99.9% sure I typed eight 0s.

What Electron version did you use (maybe this matters?), and would you mind sharing the rest of the code the options are from?

Thanks!

[sylveon]

Unfortunately since this is a modification of Discord (a closed-source program), sharing the source code would potentially lead me into trouble.

The background is solid black until you call SetWindowCompositionAttribute on it, only after it will become blurred:

The program I used in my GIF comes from here: http://glass8.eu/files/SetWindowCompositionAttribute.7z

Electron version of my Discord is 1.4.12

BTW, if you want complete control of the blur's color via the application itself, use 0x00000000 (instead of 0xaa000000 or 0xdd000000) as the color for SetWindowCompositionAttribute then set the background color of your app via CSS/however you like. For example:

body {
    background-color: rgba(150, 0, 0, 0);
}

[rianadon]

Gotcha.

It turns out I set the opacity of some elements to 80% and the dark color of the blur combined with the opacity made everything look black.

Changing the blur color to 0x00000000 did the trick. However I still had to use 80% opacities to color the blur as setting the body background color to something with 0 opacity didn't change anything.

Thanks for the help. I'd still have to wait for one of the many Windows custom titlebar issues to reach a consensus to do any more with this though.

[sylveon]

Yeah a custom titlebar is required, because blur doesn't plays well with non-borderless windows:

[rianadon]

Since it seems it will take a while for a consensus to be reached on what kind of titlebar VS Code should have, I went with the Metro app style and incorporated the color that's shown on macOS currently (since I was modifying the existing macOS custom titlebar anyways):

@bpasero if this looks good I could write a PR for the titlebar on Windows. Or would it be better to wait for one of the designs in #17060 to be decided upon?

[sylveon]

Depending on how node-gyp is complex (I never used it), I could try getting a PR for blur on Windows working after that.

BTW @rianadon looks nice :)

[rianadon]

Thank you @sylveon!

[EquinoxHzXu]

@MperorM

hi guys. I have some good news.

The old way has failed after the vscode v1.36 update.

I changed the custom.js file:

w = nodeRequire('electron')
  .remote
  .getCurrentWindow();

w.setBackgroundColor('#00000000');
w.setVibrancy('ultra-dark');
w.setFullScreen(true);

Don't forget to execute the command "Reload Custom CSS and JS".

with automatic full screen vscode, the problem has been fixed. You can turn off full screen manually.

But it seems that the terminal is not transparent?

[EYHN]

@ElizurHz

Yes, you can edit the CSS by yourself.

[sylveon]

Terminal can't be transparent, alpha rendering is disabled. My PR addresses that.

…

On Tue, Jul 9, 2019, 03:24 EEEEEEYHN ***@***.***> wrote: @ElizurHz <https://github.com/ElizurHz> Yes, you can edit the CSS by yourself. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#32257?email_source=notifications&email_token=ABRELNQBABKDUGMHRXTEVQ3P6Q4LJA5CNFSM4DWP2G22YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZPLHTI#issuecomment-509522893>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABRELNVSL2W6UB5L3E4J3XLP6Q4LJANCNFSM4DWP2G2Q> .

[DIYgod]

@MperorM

hi guys. I have some good news.

The old way has failed after the vscode v1.36 update.

I changed the custom.js file:

w = nodeRequire('electron')
  .remote
  .getCurrentWindow();

w.setBackgroundColor('#00000000');
w.setVibrancy('ultra-dark');
w.setFullScreen(true);

Don't forget to execute the command "Reload Custom CSS and JS".

with automatic full screen vscode, the problem has been fixed. You can turn off full screen manually.

Full screen is not necessary, the purpose is to trigger window resize, so we can just resize the window width, it is faster and can't be observed.

w = nodeRequire('electron').remote.getCurrentWindow();
w.setBackgroundColor('#00000000');
w.setVibrancy('ultra-dark');

// hack
const width = w.getBounds().width;
w.setBounds({
    width: width + 1,
});
w.setBounds({
    width,
});

[EYHN]

I mode a Extension that can enable Acrylic/Glass effect for your VS Code without recompiling.
Support both windows10 and macos.

click here to download

[DevilHandCC]

I mode a Extension that can enable Acrylic/Glass effect for your VS Code without recompiling.
Support both windows10 and macos.

click here to download

terminal 窗口里无效
另外，可否加些设置选项？比如颜色之类的，或者加一个亮色调的版本

[ChaseChan]

@MperorM

hi guys. I have some good news.

The old way has failed after the vscode v1.36 update.

I changed the custom.js file:

w = nodeRequire('electron')
  .remote
  .getCurrentWindow();

w.setBackgroundColor('#00000000');
w.setVibrancy('ultra-dark');
w.setFullScreen(true);

Don't forget to execute the command "Reload Custom CSS and JS".

with automatic full screen vscode, the problem has been fixed. You can turn off full screen manually.

emmmm,my vscode version is 1.36.1, i've try your method, but...,it still doesn't work for me.

I suddenly found that without open a project it works well.

but after i choose a project it is failed, omg....

[syfxlin]

Due to some issues, VSCode Insider was unable to access the main thread remotely, so the BrowserWindow could not be obtained. This effect does not work in VSCode Insider 1.37.0

由于某些问题，VSCode Insider无法远程访问主线程，因此无法获取BrowserWindow。此效果无法工作在VSCode Insider 1.37.0

Version: 1.37.0-insider (user setup)
Commit: d5900c6
Date: 2019-07-31T05:24:41.973Z
Electron: 4.2.7
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Windows_NT x64 10.0.18362

[EYHN]

@syfxlin @ChaseChan
You can use my plugin https://github.com/EYHN/vscode-vibrancy.
I have Added support for VSCode Insider 1.37.0 in the latest v1.0.5

[DevilHandCC]

@syfxlin @ChaseChan
You can use my plugin https://github.com/EYHN/vscode-vibrancy.
I have Added support for VSCode Insider 1.37.0 in the latest v1.0.5

Could you please add a light version?

[Raj2032]

@ChaseChan

@MperorM
hi guys. I have some good news.
The old way has failed after the vscode v1.36 update.
I changed the custom.js file:

w = nodeRequire('electron')
  .remote
  .getCurrentWindow();

w.setBackgroundColor('#00000000');
w.setVibrancy('ultra-dark');
w.setFullScreen(true);

Don't forget to execute the command "Reload Custom CSS and JS".
with automatic full screen vscode, the problem has been fixed. You can turn off full screen manually.

emmmm,my vscode version is 1.36.1, i've try your method, but...,it still doesn't work for me.

I suddenly found that without open a project it works well.

but after i choose a project it is failed, omg....

Hi, does it work now as I want to get this theme?

[tenF]

Using @EYHN's vibrancy extension:

Looks sexy af

Version: 1.37.0 (user setup)

I also made a minimalist flat UI theme that fits this mod perfectly.

[0x77dev]

Who can make the tutorial?

[annymosse]

any news for linux users?

[meelkor]

@annymosse This fork https://github.com/sergei-dyshel/vscode/tree/transparency works quite well (at least with compton), just makes the rendering little bit slower. You have to rebase it on latest release yourself to get latest updates though.

[annymosse]

@meelkor this fork isn't ready production, i must compile it then i can't do that ,is there a binaries (deb,appimage,snap) alternatives ?

[BobbyBabes]

@annymosse #12578 (comment)

[vscodebot]

This issue is being closed to keep the number of issues in our inbox on a manageable level, we are closing issues that are not going to be addressed in the foreseeable future: We look at the number of votes the issue has received and the number of duplicate issues filed. More details here. If you disagree and feel that this issue is crucial: We are happy to listen and to reconsider.

If you wonder what we are up to, please see our roadmap and issue reporting guidelines.

Thanks for your understanding and happy coding!

[annymosse]

@annymosse #12578 (comment)

hi , sorry to take a longtime to reply ,the comption | picom | devilspy ... are not a native solution which affect the process which affect everything inside the window (text,image..), and there is no way to custom each part inside the window look at this pic or this pic the text code still visible and clear to read.
vs against this pic

[Murray-hua]

I like your wallpaper, could you please give it to me？ thanks

[jaweii]

I developed an extension named SuperBG to set window to transparent in another way:

[adi518]

@jaweii What's the main difference? I don't think you can work around the current limitations. I'm guessing you made an extension that has more features for setting a transparent background, but in principle works the same.