search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
159.62k stars 27.93k forks source link

Allow for transparent / vibrant window theme #32257

Closed sergeysova closed 4 years ago

sergeysova commented 6 years ago

image

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

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

sylveon commented 6 years ago

@Omniusz Nice! Would you mind telling me how you did this? This would save me lots of work.

JamesLear92 commented 6 years ago

@sylveon

I added this to my user settings:

{
    "workbench.colorCustomizations": {
        "sideBar.background": "#00000077",
        "activityBar.background": "#ffffff00"
    },
    "window.menuBarVisibility": "toggle",
    "window.titleBarStyle": "custom",
    "window.transparency": "fluent"
}

Changing the sidebar and activity bar colours with alpha Unfortunately it doesn't look like you can change monaco-workbench windows nopanel via the settings though. Which is a shame, because if it's transparent to begin with, nothing else is affected when you have window.Transparency set to "none".

It almost seems like it would be fine to have transparency turned on by default, and then if you want to actually use it, you just change your theme to include transparency on different controls.

VdeVentura commented 6 years ago

Wow, I'd even pay for a theme like the OP, is the transparency feature in the works?

easyaspi314 commented 6 years ago

@irvingv8 Careful what you wish for. This is owned by Microsoft… :P

smlombardi commented 6 years ago

"window.transparency": "fluent" is an invalid key, at least in 1.23.0 on Mac.

diego-lipinski-de-castro commented 6 years ago

What's the current status of this?

rianadon commented 6 years ago

@sylveon would know best but I think the Windows version is being held up by #39972.

As for the Mac and Linux versions, I'm not sure whether they're covered by his fork or not.

diego-lipinski-de-castro commented 6 years ago

@rianadon I tried his fork, I was able to build but I could not get the transparecy when changing the attributes, whats up @sylveon

sylveon commented 6 years ago

@rianadon is right, I'm waiting on the frameless titlebar for Windows. The branch is kinda unmaintained, due to waiting on the mentioned PR. It does supports Mac and Linux. You need to manually set a few colors to transparent via the dev tools so it works (because I haven't added a way to change them programmatically yet).

LasseRosenow commented 6 years ago

Microsoft Just announced, that we can now use fluent design in win32 apps etc.

Thanks to that we could have some nice and native fluent design acrylic in the sidebar.

sylveon commented 6 years ago

They didn't. They announced that we can host UWP controls in win32, winforms and WPF apps. Which vs code is none of those. Furthermore, being able host fluent-styled UWP controls doesn't means that you can have acrylic transparency.

Le mar. 8 mai 2018 07:20, Wasserbrötchen notifications@github.com a écrit :

Microsoft Just announced, that we can now use fluent design in win32 apps etc.

Thanks to that we could have some nice fluent design acrylic in the sidebar.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Microsoft/vscode/issues/32257#issuecomment-387370364, or mute the thread https://github.com/notifications/unsubscribe-auth/AGJFtmPVbJFKFY5OwVIWYivX5YYrngHqks5twX-YgaJpZM4Oz9G1 .

LasseRosenow commented 6 years ago

Electron should be win32. So we probably have to wait for them to ship that.

diego-lipinski-de-castro commented 6 years ago

@sylveon do you plan to update macOS version or nah?

sylveon commented 6 years ago

I want to get the feature for the 3 platforms merged at the same time, so I'm waiting on #39972.

LasseRosenow commented 6 years ago

Seems like someone is working on an electron module to provide the native acrylic effect I was talking about earlier...

https://github.com/arkenthera/electron-vibrancy/issues/21

Would be cool if vscode could include it when it's finished.

sylveon commented 6 years ago

I've already expressed in a comment earlier in this thread why I don't think we should use electron-vibrancy. My fork also has this effect working fine without it.

23phy commented 6 years ago

@sylveon, you mean that your fork has acrylic blur natively? Or just blur behind? Because in this comment you are using blur behind, and not acrylic, @Wasserbroetchen was talking about achieving native acrylic like in UWP Apps. Because look, I am using the acrylic module without 

mainWindow = new BrowserWindow({
    // ...
    transparent: true,
    // ...
});

Indeed, there are some bugs there, I can see it too.

sylveon commented 6 years ago

My fork has both

2018-05-16 20:57 UTC−04:00, Oliver Cristian notifications@github.com:

@sylveon, you mean that your fork has acrylic blur natively? Or just blur behind? Because in this comment you are using blur behind, and not acrylic, @Wasserbroetchen was talking about achieving native acrylic like in UWP Apps.

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/Microsoft/vscode/issues/32257#issuecomment-389710875

-- Envoyé de mon Gmail

23phy commented 6 years ago

@sylveon, please send me a link when you have time, I want to investigate it a little.

LasseRosenow commented 6 years ago

How can your fork have native uwp acrylic like the new module of @23phy ??

https://github.com/23phy/electron-acrylic

A few posts earlier you said it won't be possible to have that. Which turned out to be wrong. So I can't really believe that. 🤔

sylveon commented 6 years ago

It still is true that XAML islands won't allow you to get acrylic transparency. My fork does not use them, it calls the undoc'd function SetWindowCompositionAttribute.

The code is available at https://github.com/sylveon/vscode/tree/transparency (the logic you're interested in is at https://github.com/sylveon/vscode/blob/transparency/src/vs/code/electron-main/window.ts)

2018-05-16 22:21 UTC−04:00, Wasserbrötchen notifications@github.com:

How can your fork have native acrylic like the new module of @23phy ??

https://github.com/23phy/electron-acrylic

A few posts earlier you said it won't be possible to have that. Which turned out to be wrong. So I can't really believe that. 🤔

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/Microsoft/vscode/issues/32257#issuecomment-389723399

-- Envoyé de mon Gmail

LasseRosenow commented 6 years ago

Okay thank you very much.

It seems like there was a misunderstanding between us. But after all I compared you're code and realized that you are already using the new acrylic effect with SetWindowCompositionAttribute, which is exactly the same as what 23phy's module does.

I'm sorry for the confusion.

23phy commented 6 years ago

Yes, indeed, but the only difference I see is that my work is modularized, so you can use it elsewhere.

DRSDavidSoft commented 6 years ago

@sylveon and @23phy So, is the method decided on? Is it the new Acrylic or Blurred-behind? Also, should this be achieved using a module or natively in VS Code?

I'm curious to know! :)

sylveon commented 6 years ago

@DRSDavidSoft What I am planning is a native integration:

DRSDavidSoft commented 6 years ago

@sylveon, wow, your plan is really well thought! I can see stable builds to become a reality soon.

Mind if I point a couple of notes:

Thanks for the amazing work you do! :)

sylveon commented 6 years ago
sylveon commented 5 years ago

I've opened PR #52707 which adds transparency support for all 3 major platforms. Would be nice to have someone testing on macOS. (I cannot afford a Apple device and a VM is more trouble than it's worth)

diego-lipinski-de-castro commented 5 years ago

I would like to test on macos, any build ready with that?

sylveon commented 5 years ago

Unsurprisingly, building for macOS requires a computer running macOS. I can't provide a build, but the wiki has fairly detailed step by step build instructions: https://github.com/Microsoft/vscode/wiki/How%20to%20Contribute

diego-lipinski-de-castro commented 5 years ago

What i mean is, I need a repo with your changes to do it

BobbyBabes commented 5 years ago

What i mean is, I need a repo with your changes to do it

I don't know if this helps, but from the linked pull request #52707 : sylveon wants to merge 10 commits into Microsoft:master from sylveon:swca.

sylveon:swca is here : https://github.com/sylveon/windows-swca

Maybe the commits are also in windows-swca.

sylveon commented 5 years ago

This is just a package I wrote. the source code is at https://github.com/sylveon/vscode/tree/swca

2018-06-24 16:29 UTC−04:00, BobbyBabes notifications@github.com:

I don't know if this helps, but from the linked pull request #52707 : sylveon wants to merge 10 commits into Microsoft:master from sylveon:swca.

sylveon:swca is here : https://github.com/sylveon/windows-swca

-- You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub: https://github.com/Microsoft/vscode/issues/32257#issuecomment-399785274

-- Envoyé de mon Gmail

waleedaman commented 5 years ago

can you share the steps to get effect similar to images in the pr

sylveon commented 5 years ago

Install (and use) this theme and set the appropriate config option for your platform:

@waleedaman

ktpttd commented 5 years ago

Really really awesome theme!!. Could you please share tutorial step by step to get this result. Thank you so much.

prostodeb commented 5 years ago
vscode

How to add transparency?

maqboolkhan commented 5 years ago

👍 Just for reference. There is the theme for Atom which supports this vibrancy effect https://github.com/simurai/one-vibrancy

pgolebiowski commented 5 years ago

In order to have transparency enabled, I guess we need to have this merged: https://github.com/Microsoft/vscode/pull/52707

@sylveon @duttaditya18 @bpasero @sbatten

The PR has been partially approved and been open for over 3 months. Could we please merge it?

sylveon commented 5 years ago

Meh, it's not approved by any MS employee, just some random person. The ball is on MS's side now, they need to get somebody reviewing it. I'd be glad to make any change requested.

Yanpas commented 5 years ago

BTW a lot of beautiful themes may be made if allow using not only colors but textures. Example (mad skillz): image

(previous issue https://github.com/Microsoft/vscode/issues/58709)

nzec commented 5 years ago

@Yanpas Texturing does look great! Let's see if the the maintainers pay attention to Design Issues.

rolzing commented 5 years ago

+1

Atom has one theme like this.

Native-Ui

a-marionette commented 5 years ago

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

ynsgnr commented 5 years ago

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

PascalPixel commented 5 years ago

This is a very basic PR that enables vibrancy on macOS Mojave: https://github.com/Microsoft/vscode/pull/65215 😃

tenF commented 5 years ago

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 commented 5 years ago

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

fffredy commented 5 years ago

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

EYHN commented 5 years ago

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 ``` 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 ``` w = nodeRequire('electron') .remote .getCurrentWindow(); w.setBackgroundColor('#00000000'); // vibrant effect https://electronjs.org/docs/api/browser-window#winsetvibrancytype-macos w.setVibrancy('ultra-dark'); // hack https://github.com/microsoft/vscode/issues/32257#issuecomment-509936623 const width = w.getBounds().width; w.setBounds({ width: width + 1, }); w.setBounds({ width, }); ```

  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

  2. Activate command "Reload Custom CSS and JS".

  3. Restart.

image