Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow for transparent / vibrant window theme #32257

Closed
sergeysova opened this issue Aug 10, 2017 · 148 comments
Closed

Allow for transparent / vibrant window theme #32257

sergeysova opened this issue Aug 10, 2017 · 148 comments

Comments

@sergeysova
Copy link

@sergeysova sergeysova commented Aug 10, 2017

image

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

@vscodebot vscodebot bot added the workbench label Aug 10, 2017
@zmitry
Copy link

@zmitry zmitry commented Aug 10, 2017

Awesome

@zbandhan
Copy link

@zbandhan zbandhan commented Aug 11, 2017

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

@rianadon
Copy link
Contributor

@rianadon rianadon commented Aug 11, 2017

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.

@aeschli aeschli assigned bpasero and unassigned aeschli Aug 11, 2017
@bpasero
Copy link
Member

@bpasero bpasero commented Aug 11, 2017

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

@bpasero bpasero added this to the Backlog milestone Aug 11, 2017
@bpasero bpasero added the ux label Aug 11, 2017
@sergeysova
Copy link
Author

@sergeysova sergeysova commented Aug 11, 2017

@bpasero I can try to make it

@bpasero
Copy link
Member

@bpasero bpasero commented Aug 11, 2017

@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
Copy link
Author

@sergeysova sergeysova commented Aug 11, 2017

@bpasero I enabled vibrancy in VSCode 1.15

wnd.setVibrancy('dark'):

image

wnd.setVibrancy('ultra-dark')

image

@sergeysova
Copy link
Author

@sergeysova sergeysova commented Aug 11, 2017

// 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:

image

@sergeysova
Copy link
Author

@sergeysova sergeysova commented Aug 11, 2017

Dark

image

@sergeysova
Copy link
Author

@sergeysova sergeysova commented Aug 11, 2017

Ultra Dark

image

@rianadon
Copy link
Contributor

@rianadon rianadon commented Aug 11, 2017

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:

image

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
Copy link
Member

@bpasero bpasero commented Aug 12, 2017

@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?

@bpasero bpasero removed their assignment Sep 21, 2017
@sylveon
Copy link
Contributor

@sylveon sylveon commented Sep 23, 2017

@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
Copy link
Contributor

@rianadon rianadon commented Oct 1, 2017

@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
Copy link
Contributor

@sylveon sylveon commented Oct 1, 2017

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:

gif

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
Copy link
Contributor

@rianadon rianadon commented Oct 1, 2017

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
Copy link
Contributor

@sylveon sylveon commented Oct 1, 2017

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

image

@bpasero bpasero removed the workbench label Nov 16, 2017
@rianadon
Copy link
Contributor

@rianadon rianadon commented Nov 23, 2017

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

image

@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
Copy link
Contributor

@sylveon sylveon commented Nov 23, 2017

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
Copy link
Contributor

@rianadon rianadon commented Nov 23, 2017

Thank you @sylveon!

@EYHN
Copy link

@EYHN EYHN commented Jul 6, 2019

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

@Nikita240
Copy link

@Nikita240 Nikita240 commented Jul 8, 2019

image

I'm in absolute love. Finally an editor that matches my Konsole theme!

I'm praying that microsoft merges this in <3

@ElizurHz
Copy link

@ElizurHz ElizurHz commented Jul 9, 2019

@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
Copy link

@EYHN EYHN commented Jul 9, 2019

@ElizurHz

Yes, you can edit the CSS by yourself.

@sylveon
Copy link
Contributor

@sylveon sylveon commented Jul 9, 2019

@DIYgod
Copy link

@DIYgod DIYgod commented Jul 10, 2019

@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
Copy link

@EYHN EYHN commented Jul 12, 2019

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
Copy link

@DevilHandCC DevilHandCC commented Jul 21, 2019

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
Copy link

@ChaseChan ChaseChan commented Jul 30, 2019

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

image

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

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

image

@syfxlin
Copy link

@syfxlin syfxlin commented Aug 1, 2019

image
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
Copy link

@EYHN EYHN commented Aug 2, 2019

@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
Copy link

@DevilHandCC DevilHandCC commented Aug 4, 2019

@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
Copy link

@Raj2032 Raj2032 commented Aug 11, 2019

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

image

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

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

image

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

@tenF
Copy link

@tenF tenF commented Aug 11, 2019

Using @EYHN's vibrancy extension:

Looks sexy af

Screenshot_4
Version: 1.37.0 (user setup)

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

@0x77dev
Copy link

@0x77dev 0x77dev commented Sep 5, 2019

Who can make the tutorial?

@annymosse
Copy link

@annymosse annymosse commented Sep 12, 2019

any news for linux users?

@meelkor
Copy link

@meelkor meelkor commented Sep 12, 2019

@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
Copy link

@annymosse annymosse commented Sep 12, 2019

@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
Copy link

@BobbyBabes BobbyBabes commented Sep 12, 2019

@vscodebot
Copy link

@vscodebot vscodebot bot commented Oct 10, 2019

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
Copy link

@annymosse annymosse commented Feb 25, 2020

@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 image or this pic 2nd image the text code still visible and clear to read.
vs against this pic 3rd image

@Murray-hua
Copy link

@Murray-hua Murray-hua commented Sep 4, 2020

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

@jaweii
Copy link

@jaweii jaweii commented Apr 22, 2021

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

watchURL

selectImages

@adi518
Copy link

@adi518 adi518 commented Apr 22, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet