-
Notifications
You must be signed in to change notification settings - Fork 28.5k
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
macOS Vibrancy Support #65215
macOS Vibrancy Support #65215
Conversation
What would be the advantages of this vs #52707? |
@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 😸 |
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 |
Not to mention it doesn't uses |
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 |
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 |
@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 |
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? |
@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. |
Conflicts fixed |
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. |
@gusbemacbe this PR is only for macOS vibrancy👨🏻🚒 |
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 |
@Superpencil It might explain why the maintainers are hesitant to merge macOS vibrancy even though it's natively supported in Electron. |
Merged master 🎊 |
@Superpencil very weird, I do all that and I get this: Can this be disabled in macOS and maybe I did that? |
@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). |
Kinda bummed that this is getting attention from Microsoft developers but my PR isn't :/ |
While the Microsoft developers answered the PR of a macOS guy. It seems that Microsoft does not like Linux. |
@sylveon sorry for that, I am going through all (my) PRs at the moment and will reply to yours as well 👍 |
@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: |
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>
.
|
🎉 Glad to hear it
Yes!
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.
Feel free to correct me, it looks like there are three Layers involved in the background's color:
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? |
@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 This is with a slightly black workbench background color ( |
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 Currently I'm trying to figure out why |
@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. |
@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. |
@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. |
@Superpencil |
Is it available on the VSCodeInsider now ? |
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! |
Too bad that it is exclusivel for macOS users. |
Hi, so, is this doomed? No vibrancy support via |
UPDATE
VSCode will not implement transparency or vibrancy unless Chrome itself adds and manages support for these features instead of Electron.
Add this to settings.json to see the effect: