GPUI window transparency

[jansol]

Check for existing issues

• Completed

Describe the feature

I don't have access to the alpha so not sure if this is supported but judging from screenshots it does not seem to be the case.

It would be very nice to have the option to make the background of zed windows slightly transparent, similarly to my current go-to setup of running neovim in alacritty with 75% background opacity.

Besides the obvious aesthetic that blends in nicely with almost any wallpaper/theme, this also allows me to put an actively updating window behind the editor (either an unrelated application or something that is hot reloading the file I am editing). The background dims the window behind the editor enough so it does not distract from editing, but still allows me to monitor the changes in the other window live without having to sacrifice editing space or alt+tabbing around.

At least on Linux it is sometimes possible to request the compositor to adjust the opacity of specific windows, but that also makes text transparent. For readability it would be important that the application handles background transparency by itself, so text and important UI symbols can remain fully opaque. The main gotcha with this appears to be that different platforms have different requirements for transparent windows (e.g. macOS wants non-premultiplied alpha, Wayland wants premultiplied).

If applicable, add mockups / screenshots to help present your vision of the feature

[SilentGlasses]

To each their own but why would you want transparency on an editor? Terminal I can understand to a point.

Pretty sure there will be an option at some point but nothing that I've seen as yet.

The docs are all here by the way...
https://zed.dev/docs/configuration/configuring-zed

[jansol]

Why would a GUI text editor be different from a terminal? (especially if the main function of the terminal is... running a text editor)

There are some practical uses for it like mentioned in the OP (hot reloading apps e.g. for shaders, api references, research papers outlining an algorithm I'm in the middle of implementing, ...) and sometimes I simply enjoy the mood set by my desktop wallpaper while being productive in a maximized editor window.

[evrensen467]

Support for window transparency and blurring is something I personally expect in any modern IDE or Text Editor, unfortunately in VSCode's case we have to use an extension, which makes the whole process hacky as we have to inject custom attributes to the built CSS.

I'd like to propose being able to control every panels transparency and blur effect from the settings, giving the option for full window transparency (e.g all panels are transparent), and also to the users who likes the macOS standard, to only have the sidebars transparent with blur (similar to Xcode).

[WilliamWelsh]

+1 ! for window transparency and blur

[jansol]

Reminder that issue popularity is programmatically tracked based on 👍 reactions to the top post, not by comments.

[jansol]

Since blur is a particularly popular component to this request, the platform-specific features for implementing that appear to be:

• macOS:
  • NSVisualEffectView Apple's way or the highway - note that the original configuration values for the view got deprecated very quickly
  • What they don't want you to know is the (apparently) widely used undocumented CGSSetWindowBackgroundBlurRadius(runtime::AnyObject, NSInteger, i64)
• Windows:
  • Acrylic material
  • Mica material
  • DWM_BLURBEHIND
  • see also https://github.com/tauri-apps/window-vibrancy/
• Linux/Wayland: (plain alpha blending is part of Wayland core)
  • org_kde_kwin_blur seems to be the only application-controlled way that is actually usable somewhere
  • ext_blur_v1 based on org_kde_kwin_blur so migrating should be easy once this gets accepted
  • Some compositors have their own blur settings, but those are generally not directly controllable by the application
  • Some compositors are explicitly against having blur support
• Linux/X11:
  • the UNIX philosophy, not application-controllable
  • KDE has some settings for forcing blur, seems to be at least somewhat application-controllable
  • GNOME has extensions for forcing blur, does not seem to be application-controllable

[jansol]

So upon further inspection I concluded that the only somewhat consistent solution across platforms is:

• The undocumented CGSSetWindowBackgroundBlurRadius (should be safe as long as Terminal.app relies on it)
• DWM_BLURBEHIND
• org_kde_kwin_blur/ext_blur_v1

The NSVisualEffectView and Acrylic/Mica materials have Opinions that are based on the system theme (tint towards bright/dark), which gets very awkward unless one designs separate themes for dark and light mode and automatically switches based on the active system theme. Additionally such themes would not really look the intended way on platforms other than the one they were created on. OTOH with the plain blur the theme can specify a semitransparent background color to tint the background in the desired way.

I started working on the somewhat portable solution (well, the macOS part of it - PR coming as soon as I have time to clean it up a bit), but I won't be touching the more platform specific ones. Those should be easy enough to add as alternatives later on if someone feels like they would be good to have.

[Luk4h]

Hello @jansol, a lover of the transparent look here as well. I would like to know how is your progress so far? I tried myself to achieve something and so far I got to render the blurred/transparent view below the zed view. I believe meaning if we got to remove the background of the zed view, to see the blurred/transparent background. I am not very comfortable with rust, which made a bit hard for me to find anything related to the zed background, at least not relevant. And my tries with applying a transparent background with themes was not successful as well. I believe this would be the first step to achieve the style we are looking for, later we would need to create a way to toggle this, since most users do not want it. I would love to contribute to this feature since I love the look. If you are willing to collaborate, or anyone else interested. Hit me up. I have forked the zed repo with my progress.

[jansol]

@Luk4h I got it working with the CGSSetWindowBackgroundBlurRadius approach, which turned out to be much simpler more convenient for theming than NSVisualEffectView. Right now my implementation is mainly stuck in figuring out how to do the plumbing from the theme to the GPUI window. I've made some decent progress with that, but it's still missing some bits before it's ready for a PR.

[Luk4h]

@jansol Are you able to share your work? Interested in seeing your approach, since It was what I aimed for, but got lost and ended up using the NSVisualEffectView, which can't get it to work together with the CAMetalLayer.

[JosephTLyons]

This is now available in v0.130.0-pre.

[krstp]

A snippet of code that show a guidance how to properly implement it would be much appreciated. It is not exactly clear how to leverage it correctly. Thanks.

[Luk4h]

A snippet of code that show a guidance how to properly implement it would be much appreciated. It is not exactly clear how to leverage it correctly. Thanks.

On the patch notes it mentions how to specify the new property. You can also override it using the "experimental.theme_overrides" property on your settings file.

[ThatOneCalculator]

Any chance we could get this on Linux too?

[xcrap]

Still have to fix some borders, but looks so sweet :)

[evwltrs]

For the impatient Gruvbox users like me based off @xcrap's config.

"experimental.theme_overrides": {
    "background.appearance": "blurred",
    "background": "#4c464290",
    "editor.background": "#00000030",
    "editor.gutter.background": "#00000030",
    "tab_bar.background": "#00000030",
    "terminal.background": "#00000030",
    "toolbar.background": "#00000030",
    "tab.active_background": "#28282820",
    "tab.inactive_background": "#00000000",
    "status_bar.background": "#00000030",
    "title_bar.background": "#00000030",
    "panel.background": "#00000030",
    "border.variant": "#00000000",
    "scrollbar.track.border": "#00000000",
    "editor.active_line.background": "#00000000"
  }

[jansol]

Linux support for transparent and blurred windows has been merged in #10973

Blur is only supported on Wayland with compositors supporting the kde-blur protocol for now -- i.e. Plasma.

On X11 it may be possible to configure a compositor to blur window backgrounds but Zed has no way to influence that.