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

Open
sergeysova opened this issue Aug 10, 2017 · 118 comments

Comments

Projects
None yet
@sergeysova
Copy link

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

This comment has been minimized.

Copy link

commented Aug 10, 2017

Awesome

@zbandhan

This comment has been minimized.

Copy link

commented Aug 11, 2017

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

@rianadon

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Author

commented Aug 11, 2017

@bpasero I can try to make it

@bpasero

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Author

commented Aug 11, 2017

@bpasero I enabled vibrancy in VSCode 1.15

wnd.setVibrancy('dark'):

image

wnd.setVibrancy('ultra-dark')

image

@sergeysova

This comment has been minimized.

Copy link
Author

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

This comment has been minimized.

Copy link
Author

commented Aug 11, 2017

Dark

image

@sergeysova

This comment has been minimized.

Copy link
Author

commented Aug 11, 2017

Ultra Dark

image

@rianadon

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

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

This comment has been minimized.

Copy link
Contributor

commented Nov 23, 2017

Thank you @sylveon!

@bpasero bpasero changed the title Propose nice theme Allow for transparent / vibrant window theme Oct 5, 2018

@rolzing

This comment has been minimized.

Copy link

commented Oct 9, 2018

+1

Atom has one theme like this.

Native-Ui

@a-marionette

This comment has been minimized.

Copy link

commented Nov 20, 2018

+1 to approval for merging #52707.
Would love to be able to achieve vibrant theme in initial screenshot.

@ynsgnr

This comment has been minimized.

Copy link

commented Dec 8, 2018

I have compiled #52707 for win64 and included sligthly edited theme @sylveon linked (I also made some changes). You need to change few settings: search "theme" in settings, set Color Theme to "Railgun" and set Window: Compositon Attribute to your liking

https://drive.google.com/open?id=1Sl1HwLPb8RexUPL0gaYjjO4EjWJnkG3p

@Superpencil

This comment has been minimized.

Copy link

commented Dec 17, 2018

This is a very basic PR that enables vibrancy on macOS Mojave: #65215 😃

@10ev

This comment has been minimized.

Copy link

commented Jan 1, 2019

I have compiled #52707 for win64 and included sligthly edited theme @sylveon linked (I also made some changes). You need to change few settings: search "theme" in settings, set Color Theme to "Railgun" and set Window: Compositon Attribute to your liking

https://drive.google.com/open?id=1Sl1HwLPb8RexUPL0gaYjjO4EjWJnkG3p

What exactly do I need to enter in the preferences to set this attribute?
I tried "window.compositionAttribute": "blur" (and "vibrant") it didn't do anything

@ynsgnr

This comment has been minimized.

Copy link

commented Jan 4, 2019

Try also enable the theme, because if your theme doesnt have transparency info, id does not display it as transparent or blured

@fffredy

This comment has been minimized.

Copy link

commented Feb 11, 2019

Hi, man I am a Mac user and I don't have enough information about using electron or other things. I downloaded vs code today. And I want to make vs code background transparent as u did in the post. I have already tried to access src/vs/ folder but unfortunately I did not be able to access that. There is not any video for making it transparent. Since I don't know how to re-build vs code I did not be able to make vs code transparent. PLEASE, PLEASE make a video tutorial from beginner to the end on how to make vs code transparent. It looks easy for you to make it but I am sure that it is really hard for a beginner programmers like me. I hope you will reply to me. Have a nice day

@gkkirilov gkkirilov referenced this issue Apr 16, 2019

Open

UX Backlog #66299

3 of 29 tasks complete
@EYHN

This comment has been minimized.

Copy link

commented May 5, 2019

Hi, There is a way for macos without recompiling vscode.

  1. Install extension "Custom CSS and JS Loader"

  2. Create CSS and JS files

custom.css
html {
    background: transparent !important;
}

.scroll-decoration {
    box-shadow: none !important;
}

.minimap {
    opacity: 0.6;
}

.editor-container {
    background: transparent !important;
}

.search-view .search-widget .input-box, .search-view .search-widget .input-box .monaco-inputbox,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab,
.monaco-editor-background,
.monaco-editor .margin,
.monaco-workbench>.part>.content,
.monaco-workbench>.editor>.content>.one-editor-silo.editor-one,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title,
.monaco-workbench>.part>.title,
.monaco-workbench,
.monaco-workbench>.part,
body {
    background: transparent !important;
}

.editor-group-container>.tabs {
    background-color: rgba(37, 37, 37,0.2) !important;
}

.editor-group-container>.tabs .tab {
    background-color: transparent !important;
}

.editor-group-container>.tabs .tab.active {
    background-color: rgba(37, 37, 37,0.4) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.focused {
    outline-color: rgb(37, 37, 37,0.6) !important;
}

.monaco-list.settings-toc-tree .monaco-list-row.selected,
.monaco-list.settings-toc-tree .monaco-list-row.focused,
.monaco-list .monaco-list-row.selected,
.monaco-list.settings-toc-tree:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
    background-color: rgb(37, 37, 37,0.6) !important;
}

.monaco-list.settings-editor-tree .monaco-list-row {
    background-color: transparent !important;
    outline-color: transparent !important;
}

.monaco-inputbox {
    background-color: rgba(41, 41, 41,0.2) !important;
}

.monaco-editor .selected-text {
    background-color: rgba(58, 61, 65,0.6) !important;
}

.monaco-editor .focused .selected-text {
    background-color: rgba(38, 79, 120,0.6) !important;
}

.monaco-editor .view-overlays .current-line {
    border-color: rgba(41, 41, 41,0.2) !important;
}

.extension-editor,
.monaco-inputbox>.wrapper>.input,
.monaco-workbench>.part.editor>.content>.one-editor-silo>.container>.title .tabs-container>.tab.active,
.preferences-editor>.preferences-header,
.preferences-editor>.preferences-editors-container.side-by-side-preferences-editor .preferences-header-container,
.monaco-editor, .monaco-editor .inputarea.ime-input {
    background: transparent !important;
}

.editor-group-container>.tabs .tab {
    border: none !important;
}
custom.js
nodeRequire('electron').remote.getCurrentWindow().setVibrancy('ultra-dark');
  1. Add to settings.json
"vscode_custom_css.imports": [
  "file:///Users/MyUserName/Documents/custom.css",
  "file:///Users/MyUserName/Documents/custom.js"
],
"vscode_custom_css.policy": true
  1. Activate command "Reload Custom CSS and JS".

  2. Restart.

image

@alan-w-255

This comment has been minimized.

Copy link

commented May 7, 2019

@EYHN doesn't work on windows 10.

@AGDholo

This comment has been minimized.

Copy link

commented May 7, 2019

@EYHN doesn't work on windows 10.

follow the: https://github.com/be5invis/vscode-custom-css#getting-started

@EYHN

This comment has been minimized.

Copy link

commented May 8, 2019

@alan-w-255 Sorry, my method uses the vibrancy effect api of electron, not for windows.

@fireairforce

This comment has been minimized.

Copy link

commented May 10, 2019

how to run this theme on linux?

@joname1

This comment has been minimized.

Copy link

commented May 10, 2019

Hi, There is a way for macos without recompiling vscode.

  1. Install extension "Custom CSS and JS Loader"
  2. Create CSS and JS files

custom.css
custom.js

  1. Add to settings.json
"vscode_custom_css.imports": [
  "file:///Users/MyUserName/Documents/custom.css",
  "file:///Users/MyUserName/Documents/custom.js"
],
"vscode_custom_css.policy": true
  1. Activate command "Reload Custom CSS and JS".
  2. Restart.

image

it doesn't work on Mac OS 10.12.6, VScode 1.33.1
image

@MichaelPorter0

This comment has been minimized.

Copy link

commented May 10, 2019

Hi, There is a way for macos without recompiling vscode.

  1. Install extension "Custom CSS and JS Loader"
  2. Create CSS and JS files

custom.css
custom.js

  1. Add to settings.json
"vscode_custom_css.imports": [
  "file:///Users/MyUserName/Documents/custom.css",
  "file:///Users/MyUserName/Documents/custom.js"
],
"vscode_custom_css.policy": true
  1. Activate command "Reload Custom CSS and JS".
  2. Restart.

image

it doesn't work on linux(deepin)

@EYHN

This comment has been minimized.

Copy link

commented May 10, 2019

@joname1 @MichaelPorter0 Thank you for your feedback. My method uses the setVibrancy api of electron (at here https://electronjs.org/docs/api/browser-window#winsetvibrancytype-macos), only supports macos. If there is any error on macos, you can submit issues to electron.

@daniuwo

This comment has been minimized.

Copy link

commented May 10, 2019

@MichaelPorter0
I am also looking for vibrant window theme for Linux (deepin)

@fireairforce

This comment has been minimized.

Copy link

commented May 10, 2019

@MichaelPorter0
I am also looking for vibrant window theme for Linux (deepin)

me too , I want to find a way for ubuntu

@daniuwo

This comment has been minimized.

Copy link

commented May 10, 2019

@DRSDavidSoft

This comment has been minimized.

Copy link

commented May 10, 2019

@Azureki

This comment has been minimized.

Copy link

commented May 11, 2019

This is not a good solution.
Maybe we can think about the system config?
I use linux with KDE desktop, which can make windows transparent without changing the config of vscode.

Alt+F3->M->W->Appearance.

vscode2

@DRSDavidSoft

This comment has been minimized.

Copy link

commented May 11, 2019

Maybe we can think about the system config?
I use linux with KDE desktop, which can make windows transparent without changing the config of vscode.

Alt+F3->M->W->Appearance.

vscode2

There are two problems with this method (and similarly, the "GlassIt" ext. for Win32):

  1. The text gets transparent in addition to the background (this is generally an undesired effect, as the text becomes harder to read)
  2. You can't apply blurred-behind to reduce background image details

Granted, it is a simple and easy method to achieve transparency, but IMHO, it doesn't look as good as the other approach where you have control on what elements and how much transparency to apply to.

@Azureki

This comment has been minimized.

Copy link

commented May 11, 2019

@DRSDavidSoft Oh, I didn't expect that this window transparency config would also influence the text.
This is indeed a bad solution. Thx for pointing out this.

@Creel6

This comment has been minimized.

Copy link

commented May 11, 2019

Hi, There is a way for macos without recompiling vscode.

  1. Install extension "Custom CSS and JS Loader"
  2. Create CSS and JS files

custom.css
custom.js

  1. Add to settings.json
"vscode_custom_css.imports": [
  "file:///Users/MyUserName/Documents/custom.css",
  "file:///Users/MyUserName/Documents/custom.js"
],
"vscode_custom_css.policy": true
  1. Activate command "Reload Custom CSS and JS".
  2. Restart.

image

OS: MacOS Mojave

Terminal panel seems not transparent:

image

Is it inoperable?

@DRSDavidSoft

This comment has been minimized.

Copy link

commented May 11, 2019

@Creel6 You seem to have the same issue as this one:
#52707 (comment)

As a solution, switch to the #52707 branch instead.

Here's how the terminal vibrancy looks like with #52707:
#52707 (comment)

@clar-chen

This comment has been minimized.

Copy link

commented May 14, 2019

超黑暗

图片

What is the attribute value of the directory bar on the left?

@vioulo

This comment has been minimized.

Copy link

commented May 16, 2019

Why Windows does not support 😿

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.