macOS Vibrancy Support #65215

PascalPixel · 2018-12-17T15:33:32Z

UPDATE

VSCode will not implement transparency or vibrancy unless Chrome itself adds and manages support for these features instead of Electron.

Not sure if this is helpful, I tried to make as small a PR as possible, only focussed on macOS. 🙊
This PR adds transparency/vibrancy support for macOS Mojave (10.14.x = darwin 18.x) and up.
It adds a dropdown in Settings with four basic vibrancy options.
It only works with themes that use transparent colors, see below for a sample.
Relates issues Allow for transparent / vibrant window theme #32257, Make VSCode window transparent #12578, Windows, macOS and Linux transparency #52707

Add this to settings.json to see the effect:

{
    "workbench.colorCustomizations": {
        "activityBar.background": "#00000000",
        "sideBar.background": "#00000000",
        "titleBar.activeBackground": "#00000000",
    },
    "window.vibrancy": "dark"
}

msftclas · 2018-12-17T15:33:45Z

All CLA requirements met.

sylveon · 2018-12-17T23:01:30Z

What would be the advantages of this vs #52707?

PascalPixel · 2018-12-18T01:40:55Z

@sylveon you did amazing work, even making packages to support the effect on Linux and Windows!

I was hoping this PR would be easier to review and merge, no new dependencies or big changes, it just adds vibrancy as a setting like other macOS settings as native tabs 😸

sylveon · 2018-12-18T03:08:02Z

Why not base it on mine then? There's a few points where it's better such as making the workbench color editable instead of doing a terrible isMac ? transparent : otherColor, it has two more options (appearanced-based and titlebar) and it fixes the terminal to also work with transparent colors. Plus it'd make it easier for me to rebase my PR if this one gets merged but not mine.

sylveon · 2018-12-18T03:10:22Z

Not to mention it doesn't uses transparent: true which breaks a few things. Shadows do not work, neither does resizing according to https://electronjs.org/docs/api/frameless-window#limitations

PascalPixel · 2018-12-18T04:22:47Z

Thank you for your feedback! I want to keep things as small as possible so I can selfishly get this feature and use it to make a beautiful theme 🙊

Regarding the background color, I'm assuming that it's not editable for a reason, so I'm only trying to implement what we need for vibrancy to work, what do you think?

This PR did use transparent: true, but vscode on Mac doesn't use frame: false, so the shadows and resizing work: https://electronjs.org/docs/api/frameless-window#alternatives-on-macos
I found a bug while investigating this, if you used a native titlebar vibrancy stops working, which is fine, but the titlebar becomes fully transparent. Removing transparent: true fixed it, seems that all we need is vibrancy!

…ibrancy

src/vs/platform/windows/common/windows.ts

fffredy · 2019-02-11T19:44:05Z

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

PascalPixel · 2019-02-12T06:09:42Z

@fffredy Glad to see you are so excited! All the instructions are in the documentation, but if you build the editor from scratch you won't be able to get updates anymore, and installing extensions is hard.

It's much safer to use the official build and get all those useful extensions and security updates!

Personally, I use a macOS lookalike theme for now: https://marketplace.visualstudio.com/items?itemName=pascalpixel.cameo

drhumlen · 2019-02-27T17:00:56Z

What will it take to get this merged? It's barely 25 lines of code. Reviewing this should take minutes; if that. Both this PR and @sylveon's more comprehensive implementation is just hanging in the air for no obvious reason?

Can we please have this tiny PR merged - it would make a world of a difference visually for everyone on MacOS. What's the hold up?

PascalPixel · 2019-02-28T03:06:30Z

@drhumlen while a small PR, the background color of the window is set to transparent on all macs, regardless of vibrancy support, or if it’s on or off. This is what @sylveon mentioned as being hacky, as it a global setting, it probably has unknown side effects that are hard to anticipate.

Secondly, the color options for the UI are currently not ideal for handling this PR even if merged, as for example the Sidebar Background color (set to transparent) also turns the Command Palette transparent, as it uses the same key for color.

PascalPixel · 2019-02-28T05:03:36Z

Conflicts fixed

gusbemacbe · 2019-03-02T01:06:25Z

HI @Superpencil

On Linux, I cloned your repository and compiled Code-OSS via yarn, yarn run watch and then via gulp vscode-linux-x64, the packaged Code-OSS has window.vibrancy in its JS file, but does not recognise the vibrancy settings. I believe that it is exclusive for macOS.

I will try to test @sylveon's.

PascalPixel · 2019-03-03T11:53:58Z

@gusbemacbe this PR is only for macOS vibrancy👨🏻‍🚒

PascalPixel · 2019-03-26T09:59:55Z

Electron 4 and 5 both have an issue with Vibrancy no longer working after a page reload, so when vscode is upgraded to Electron 4 this PR will no longer properly work: electron/electron#8310

DRSDavidSoft · 2019-03-26T10:05:51Z

@Superpencil It might explain why the maintainers are hesitant to merge macOS vibrancy even though it's natively supported in Electron.

PascalPixel · 2019-07-01T14:42:23Z

Merged master 🎊

bpasero · 2019-07-01T15:03:46Z

@Superpencil very weird, I do all that and I get this:

Can this be disabled in macOS and maybe I did that?

PascalPixel · 2019-07-01T18:43:54Z

@bpasero 😅 after pulling in master it no longer worked, due to this part it seems:

if (isMacintosh && background.toUpperCase() === DEFAULT_BG_DARK) {
  background = '#171717'; // https://github.com/electron/electron/issues/5150
}

I now have the window options always set background to transparent if vibrancy is enabled, so it should work, please give it another shot. (It might work without custom title bar).

sylveon · 2019-07-01T19:43:22Z

Kinda bummed that this is getting attention from Microsoft developers but my PR isn't :/
It's been open for more than 1 year and nobody from Microsoft ever commented, the thread is basically a tech support thread now. Receiving that simple comment about playing catch up with features could have been helpful instead of radio silence.

gusbemacbe · 2019-07-01T21:51:33Z

While the Microsoft developers answered the PR of a macOS guy. It seems that Microsoft does not like Linux.

bpasero · 2019-07-02T05:37:58Z

@sylveon sorry for that, I am going through all (my) PRs at the moment and will reply to yours as well 👍

bpasero · 2019-07-02T05:58:37Z

@Superpencil ok it is working for me now. After a window reload I get this broken state (probably due to the Electron issue mentioned?):

Also, my understanding is that this would only work well with a theme that defines colors with transparency right? E.g. the tree selection looks pretty bad with our standard background:

sylveon · 2019-07-02T07:24:31Z

Correct, but some parts need to be adjusted, for example the integrated terminal does not supports transparency and giving it a transparent color results in pure black. This is something that my PR addresses. I also find that forcing the workbench background color to fully transparent when a Mac platform is used to be pretty hacky. My PR instead makes it a normal color which is customizable by a theme - allowing them for example to apply a global background tint by changing that color. There are a couple other oddities pointed out in my PR for example the quick panel sharing background colors with the text editor, so when the text editor is set to a transparent color the quick panel can get hard to read. (This one I haven't addressed due to a recent lack of time, but I imagine it's just a matter of making it a different color option and defaulting that color option to the text editor background)

…

On Tue, Jul 2, 2019, 02:00 Benjamin Pasero ***@***.***> wrote: @Superpencil <https://github.com/Superpencil> ok it is working for me now. After a window reload I get this broken state (probably due to the Electron issue mentioned?): [image: image] <https://user-images.githubusercontent.com/900690/60486425-15bdbc80-9c9f-11e9-833b-78bbf6107725.png> Also, my understanding is that this would only work well with a theme that defines colors with transparency right? E.g. the tree selection looks pretty bad with our standard background: [image: image] <https://user-images.githubusercontent.com/900690/60486523-2ff79a80-9c9f-11e9-9a5b-7a974161a5ec.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#65215?email_source=notifications&email_token=ABRELNUBAALEBETHXMLPX2DP5LVIPA5CNFSM4GK2LHG2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZAE3DY#issuecomment-507530639>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABRELNW34PUC2CGSSQFJVRDP5LVIPANCNFSM4GK2LHGQ> .

PascalPixel · 2019-07-02T13:17:53Z

@bpasero ok it is working for me now.

🎉 Glad to hear it

@bpasero After a window reload I get this broken state (probably due to the Electron issue mentioned?):

Yes! options.backgroundColor is not preserved on reload, however, there was a fix for this which was also back-ported to Electron 4, I am entirely unsure why this isn't working in vscode, perhaps we use a different reload method?

@bpasero Also, my understanding is that this would only work well with a theme that defines colors with transparency right? E.g. the tree selection looks pretty bad with our standard background:

Aye! This PR would not affect existing themes, while allowing new themes to incorporate transparency if they so wish.

While creating a macOS-inspired theme I felt vibrancy on the sidebar was missing to make it fit in a little better with the native apps, so this would allow me and others to do that.

I'm also not looking for making other pieces transparent like the terminal or the editor itself as @sylveon's PR does (which has been a lot of work, especially the support you've provided to enthusiasts, kudos to you!).

As this PR stands, the only issue I would have with implementing a transparent sidebar is that the Command Palette uses the Sidebar's background. If set to transparent, the Command Palette's text becomes unreadable. We could address this by supplying a new workbench color for the Command Palette background specifically, but let the Command Palette use the sidebar color if that new option is not provided in the theme. This would prevent existing themes from breaking.

@sylveon I also find that forcing the workbench background color to fully
transparent when a Mac platform is used to be pretty hacky.

Feel free to correct me, it looks like there are three Layers involved in the background's color:

Electron window background (now transparent)
Workbench background color (now set to transparent)
Theme elements' backgrounds (opaque or transparent depending on theme rules)

Inline comments mention Layer 2 is set to enable anti-aliasing on Windows, the color also doesn't change if you change the theme, why is this editable in your PR? Does it affect the Terminal?

sylveon · 2019-07-02T18:22:19Z

@Superpencil This allows a theme to easily apply a global background tint to the application, especially important in Linux and Windows where the effect is fully transparent. macOS's vibrancy modes already apply such a tint so it's less useful.

This is Windows with a #00000000 workbench background color, not quite useful:

This is with a slightly black workbench background color (#00000066), much better:

PascalPixel · 2019-07-04T08:21:07Z

Ah that makes sense, thank you for explaining, it would be a good feature to have. For this PR though I'm not working with windowConfig.transparent only with windowConfig.vibrancy, and since we already have one or two places where we explicitly overwrite background color just for macOS, I think it's OK for this one to just turn the workbench background transparent on macOS, though perhaps only if vibrancy is enabled. I will look into that as it would be less 'hacky'!

Currently I'm trying to figure out why windowConfig.background is lost on reload when only using windowConfig.vibrancy, it seems to have something to do with the order functions are handled during a reload. 🤞

PascalPixel · 2019-07-04T13:57:27Z

@bpasero It works on reload now 🎊 Please try again!

Edit: Separated Command palette and Quick Input colors from Sidebar colors so there is no interference when the former is transparent.

bpasero · 2019-07-04T16:22:56Z

@Superpencil thank you.

I feel bad for having caused more work for you on this PR because my original statement still holds true: Besides the UX discussion we have to have if we wanted to add this feature (and the impact on themes), I fear that Electron updates will cause regressions of this experience. Just by looking at the amount of regressions from updating to Electron 4 this week for APIs that only VSCode seems to exercise I can tell that I do not want to expose VSCode to any more "exotic" Electron API. We will make sure to update our contribution guidelines around this topic so that this is communicated properly in the future.

Having said that, if there is browser support for this feature, e.g. in the form of some custom CSS rule I would be happy to revisit this topic, given that it would be the browsers responsibility (Chrome) to keep the feature working.

Thanks for understanding.

sylveon · 2019-07-04T17:36:06Z

@Superpencil I'm not using windowConfig.transparent on Windows either because it's a very poor choice to implement such a feature, it breaks a tons of things.

tiansin · 2019-07-04T19:19:30Z

@Superpencil
Why is the latest code restricting the use of ultra-dark?
Is the ‘window.vibrancy' configuration item available in the High Sierra version?

PascalPixel · 2019-07-04T21:14:08Z

@bpasero No worries! I learned a lot, keep up the great work! 🖖🏻
@sylveon best of luck!

tphuc · 2019-07-05T08:49:37Z

Merged master 🎊

Is it available on the VSCodeInsider now ?

PascalPixel · 2019-07-05T14:23:28Z

@tiansin To allow themes to determine the tint more by having less black / white, but I'm sure if this is ever implemented they would allow ultra-dark as well.
@tphuc No, VSCode will only support Vibrancy if and when Chrome adds support for it, as opposed to Electron, sorry!

PascalPixel · 2019-07-07T20:50:01Z

For posterity 👴🏻 and because I'm proud of the result 🤩, the Cameo theme with the new (wonderful!) icons and vibrancy enabled (and titlebar-less extension):

Will continue to improve Cameo even without vibrancy!

gusbemacbe · 2019-07-07T23:24:44Z

Too bad that it is exclusivel for macOS users.

niccolomineo · 2019-07-12T09:13:53Z

Hi, so, is this doomed? No vibrancy support via settings.json at the moment?

macOS Vibrancy Support

496d19b

This was referenced Dec 17, 2018

Make VSCode window transparent #12578

Closed

Allow for transparent / vibrant window theme #32257

Closed

mjbvz assigned bpasero Dec 17, 2018

Transparent option isn't needed for Vibrancy to work

78a4ef0

bpasero added this to the Backlog milestone Dec 18, 2018

Merge branch 'master' of https://github.com/Superpencil/vscode into v…

b8df376

…ibrancy

DRSDavidSoft reviewed Jan 12, 2019

View reviewed changes

src/vs/platform/windows/common/windows.ts Outdated Show resolved Hide resolved

DRSDavidSoft mentioned this pull request Jan 15, 2019

Windows, macOS and Linux transparency #52707

Closed

Merge branch 'master' of github.com:Microsoft/vscode into vibrancy

45ba0e3

PascalPixel added 2 commits February 28, 2019 13:59

merge

cfc6355

Re-add vibrancy support in renamed file

ef6a04b

Rename enableVibrancy to vibrancy

0a735f9

PascalPixel and others added 2 commits April 7, 2019 17:23

Merge branch 'master' of github.com:Microsoft/vscode into vibrancy

e2389e4

Fix microsoft#74641. Update viewzone afterline when position changes.

e4399d0

PascalPixel added 2 commits July 1, 2019 20:35

Fix vibrancy for Electron 4

aeb43cd

Vibrancy type fix

22b2a18

PascalPixel added 2 commits July 4, 2019 15:23

Fix background becoming opaque on reload

5d329f2

Add appearance-based for macOS Catalina

c446942

PascalPixel added 2 commits July 4, 2019 16:11

Separate colors to allow vibrancy on Sidebar

3472e57

Limit vibrancy options to dark, light, and auto

17b8fc1

PascalPixel closed this Jul 4, 2019

PascalPixel mentioned this pull request Oct 8, 2019

Could you add Vibrancy? iocave/customize-ui#7

Closed

github-actions bot locked and limited conversation to collaborators Mar 27, 2020

macOS Vibrancy Support #65215

macOS Vibrancy Support #65215

Conversation

PascalPixel commented Dec 17, 2018 • edited Loading

UPDATE

VSCode will not implement transparency or vibrancy unless Chrome itself adds and manages support for these features instead of Electron.

msftclas commented Dec 17, 2018 • edited Loading

sylveon commented Dec 17, 2018

PascalPixel commented Dec 18, 2018 • edited Loading

sylveon commented Dec 18, 2018

sylveon commented Dec 18, 2018

PascalPixel commented Dec 18, 2018

fffredy commented Feb 11, 2019

PascalPixel commented Feb 12, 2019

drhumlen commented Feb 27, 2019

PascalPixel commented Feb 28, 2019 • edited Loading

PascalPixel commented Feb 28, 2019

gusbemacbe commented Mar 2, 2019

PascalPixel commented Mar 3, 2019

PascalPixel commented Mar 26, 2019

DRSDavidSoft commented Mar 26, 2019

PascalPixel commented Jul 1, 2019

bpasero commented Jul 1, 2019

PascalPixel commented Jul 1, 2019 • edited Loading

sylveon commented Jul 1, 2019

gusbemacbe commented Jul 1, 2019 • edited Loading

bpasero commented Jul 2, 2019 • edited Loading

bpasero commented Jul 2, 2019

sylveon commented Jul 2, 2019 via email

PascalPixel commented Jul 2, 2019

sylveon commented Jul 2, 2019

PascalPixel commented Jul 4, 2019

PascalPixel commented Jul 4, 2019 • edited Loading

bpasero commented Jul 4, 2019

sylveon commented Jul 4, 2019

tiansin commented Jul 4, 2019 • edited Loading

PascalPixel commented Jul 4, 2019

tphuc commented Jul 5, 2019

PascalPixel commented Jul 5, 2019

PascalPixel commented Jul 7, 2019

gusbemacbe commented Jul 7, 2019

niccolomineo commented Jul 12, 2019

PascalPixel commented Dec 17, 2018 •

edited

Loading

msftclas commented Dec 17, 2018 •

edited

Loading

PascalPixel commented Dec 18, 2018 •

edited

Loading

PascalPixel commented Feb 28, 2019 •

edited

Loading

PascalPixel commented Jul 1, 2019 •

edited

Loading

gusbemacbe commented Jul 1, 2019 •

edited

Loading

bpasero commented Jul 2, 2019 •

edited

Loading

PascalPixel commented Jul 4, 2019 •

edited

Loading

tiansin commented Jul 4, 2019 •

edited

Loading